添加弹框拖拽

src/pages/counter/list/index.vue

@@ -113,7 +113,7 @@
         </div>
 
         <!-- 硬件交互--弹框 -->
-        <div v-show="showPop" width="900px" class="data-dia">
+        <div v-show="showPop" width="900px" class="data-dia" ref="dataDia" v-drag>
             <div class="dia-header">
                 <div class="data-title">{{ popText }}</div>
                 <img class="close" v-lazy="lazyImg[28]" alt="" @click="closePop" />
@@ -533,6 +533,14 @@ export default {
             return this.$store.state.system.fullScreen;
         },
         showPop:function(){/* 展示弹框 */
+            const dataDia = this.$refs.dataDia
+            // 每次显示弹框时重置方位
+            if (dataDia) {
+                dataDia.style.top = '68px'
+                dataDia.style.left = '50%'
+            }
+                
+            this.$refs.dataDia
             this.receptionList = []
             if(this.$store.state.system.popText == '刷卡器'){
                 if (this.$store.state.system.id == '62,1'){

src/plugins/drag/index.js

@@ -0,0 +1,51 @@
+/**
+ * @description 鉴权指令
+ * 当传入的权限当前用户没有时，会移除该组件
+ * 用例：<Tag v-auth>text</Tag> 或者：<Tag v-auth="'user:编辑'">text</Tag>
+ * */
+export default {
+  bind(el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.dia-header')
+    const dragDom = el
+    dialogHeaderEl.style.cursor = 'move'
+ 
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+ 
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+ 
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+ 
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+ 
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+ 
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+ 
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+ 
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/plugins/index.js

@@ -4,11 +4,13 @@
 
 import directiveAuth from '@/plugins/auth';
 import throttle from '@/plugins/throttle';
+import drag from '@/plugins/drag';
 
 export default {
     async install (Vue, options) {
         // 指令
         Vue.directive('auth', directiveAuth);
         Vue.directive('throttle', throttle);
+        Vue.directive('drag', drag);
     }
 }