0912xx

src/views/tips/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tips">
+    <div class="tips" ref="tipsDomRef" @mousedown="dragEvent">
         <!-- 顶部面板 -->
         <div class="top-panel" v-if="ifShowTop">
             <!-- 顶部导航菜单 -->
@@ -54,7 +54,7 @@
             </div>
         </div>
         <!-- 底部图标 -->
-        <div class="bottom-panel" @click="ifShowTop = !ifShowTop">
+        <div class="bottom-panel" @dblclick="openTopPanel" v-if="!ifShowTop">
             <div class="icon"></div>
             <div class="msg-num">{{ totalTipsNum }}</div>
         </div>
@@ -67,6 +67,8 @@ export default defineComponent({
     name: 'tips',
     components: {},
     setup() {
+        const tipsDomRef = ref(null)
+
         const navBtns = reactive([
             {
                 name: `待办信息`,
@@ -201,7 +203,65 @@ export default defineComponent({
             return totalNum <= 99 ? totalNum === 0 ? '' : totalNum : `10+`
         })
 
+        const dragEvent = (e) => {
+            // tipsDomRef.value.stopPropagation()
+            //算出鼠标相对元素的位置
+            let disX = e.clientX - tipsDomRef.value.offsetLeft;
+            let disY = e.clientY - tipsDomRef.value.offsetTop;
+            //自身宽高
+            let moveW = tipsDomRef.value.offsetWidth;
+            let moveH = tipsDomRef.value.offsetHeight;
+            //父级宽高
+            let parentW = window.innerWidth;//父盒子的width
+            let parentH = window.innerHeight;//父盒子的height
+
+            let move = function (move) {
+                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+                let left = move.clientX - disX;
+                let top = move.clientY - disY;
+                let resW = parentW - moveW;//父盒子宽减去移动盒子的宽 = 最大可移动的区域
+                let resH = parentH - moveH;//父盒子高减去移动盒子的高 = 可最大移动的区域
+                left = left >= resW ? resW : left <= 0 ? 0 : left;
+                top = top >= resH ? resH : top <= 0 ? 0 : top;
+                //移动当前元素
+                tipsDomRef.value.style.left = left + "px";
+                tipsDomRef.value.style.top = top + "px";
+            }
+
+            tipsDomRef.value.addEventListener('mousemove', move)
+
+            tipsDomRef.value.addEventListener('mouseup', (e) => {
+                //鼠标弹起来的时候不再移动
+                tipsDomRef.value.removeEventListener('mousemove', move)
+            })
+        }
+
+        const openTopPanel = (e) => {
+            ifShowTop.value = !ifShowTop.value
+            // let disX = e.clientX - tipsDomRef.value.offsetLeft;
+            // let disY = e.clientY - tipsDomRef.value.offsetTop;
+            setTimeout(() => {
+                //自身宽高
+                let moveW = tipsDomRef.value.offsetWidth;
+                let moveH = tipsDomRef.value.offsetHeight;
+                //父级宽高
+                let parentW = window.innerWidth;//父盒子的width
+                let parentH = window.innerHeight;//父盒子的height
+                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+                let left = tipsDomRef.value.offsetLeft;
+                let top = tipsDomRef.value.offsetTop;
+                let resW = parentW - moveW;//父盒子宽减去移动盒子的宽 = 最大可移动的区域
+                let resH = parentH - moveH;//父盒子高减去移动盒子的高 = 可最大移动的区域
+                left = left >= resW ? resW : left <= 0 ? 0 : left;
+                top = top >= resH ? resH : top <= 0 ? 0 : top;
+                //移动当前元素
+                tipsDomRef.value.style.left = left + "px";
+                tipsDomRef.value.style.top = top + "px";
+            }, 100)
+        }
+
         return {
+            tipsDomRef,
             navBtns,
             currentBtn,
             ifShowTop,
@@ -209,7 +269,9 @@ export default defineComponent({
             msgData,
             totalTipsNum,
             //func
-            handleBtnClick
+            handleBtnClick,
+            dragEvent,
+            openTopPanel
         };
     },
 });
@@ -217,11 +279,12 @@ export default defineComponent({
 <style lang="less" scoped>
 .tips {
     position: fixed;
-    right: 46px;
-    bottom: 20px;
+    left: 46px;
+    top: 20px;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    user-select: none;
 
     .top-panel {
         margin-bottom: 24px;
@@ -419,4 +482,5 @@ export default defineComponent({
             line-height: 18.72px;
         }
     }
-}</style>
+}
+</style>