财务管理，应付总账弹窗拖拽

src/directive/el-dragDialog/drag.js

@@ -0,0 +1,77 @@
+export default{
+  bind(el, binding, vnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    dragDom.style.cssText += ';top:0px;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const getStyle = (function() {
+      if (window.document.currentStyle) {
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      const dragDomWidth = dragDom.offsetWidth
+      const dragDomheight = dragDom.offsetHeight
+
+      const screenWidth = document.body.clientWidth
+      const screenHeight = document.body.clientHeight
+
+      const minDragDomLeft = dragDom.offsetLeft
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+      const minDragDomTop = dragDom.offsetTop
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+      // 获取到的值带px 正则匹配替换
+      let styL = getStyle(dragDom, 'left')
+      let styT = getStyle(dragDom, 'top')
+
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/\px/g, '')
+        styT = +styT.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+
+        // 边界处理
+        if (-(left) > minDragDomLeft) {
+          left = -minDragDomLeft
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft
+        }
+
+        if (-(top) > minDragDomTop) {
+          top = -minDragDomTop
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop
+        }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+        // emit onDrag event
+        vnode.child.$emit('dragDialog')
+      }
+
+      document.onmouseup = function() {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/directive/el-dragDialog/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install);
+}
+
+drag.install = install
+export default drag

src/views/finance/totalPayments/index.vue

@@ -54,7 +54,7 @@
             @pagination="getList" />
 
 
-        <el-dialog title="详情" :visible.sync="dialogVisible" width="1600px" :modal-append-to-body="false">
+        <el-dialog title="详情" v-el-drag-dialog :visible.sync="dialogVisible" width="80%" :modal-append-to-body="false">
 
             <el-button type="warning" icon="el-icon-download" size="mini" @click="xqHandleExport">导出</el-button>
 
@@ -93,7 +93,7 @@
 
     </div>
 </template>
-  
+
 <script>
 
 import { listTotalPayments, totalPaymentsExport } from "@/api/finance/totalPayments";
@@ -101,6 +101,9 @@ import { getClient } from "@/api/basicdata/corps";
 
 import { listInStock, getExport } from "@/api/warehouse/inStock";
 
+import elDragDialog from "@/directive/el-dragDialog";
+
+
 export default {
     name: "Vessel",
     components: {
@@ -155,6 +158,9 @@ export default {
         this.getList();
         this.getClientList();
     },
+    directives: {
+      elDragDialog,
+    },
     methods: {
         /** 查询船名列表 */
         getList() {
@@ -306,4 +312,3 @@ export default {
     }
 };
 </script>
-