优化列表

src/directive/dialog-drag/index.js

@@ -0,0 +1,72 @@
+/**
+ * Element UI el-dialog：按住标题栏可拖拽移动
+ * 使用：<el-dialog v-dialog-drag ...>
+ */
+import Vue from 'vue'
+
+function bindDrag(el) {
+  const header = el.querySelector('.el-dialog__header')
+  const dialog = el.querySelector('.el-dialog')
+  if (!header || !dialog) return
+
+  header.style.cursor = 'move'
+  header.style.userSelect = 'none'
+
+  const onMouseDown = (e) => {
+    if (e.button !== 0) return
+    if (e.target.closest('.el-dialog__headerbtn')) return
+
+    const rect = dialog.getBoundingClientRect()
+    const offsetX = e.clientX - rect.left
+    const offsetY = e.clientY - rect.top
+    const sty = dialog.style
+    sty.margin = '0'
+    sty.position = 'fixed'
+    sty.left = `${rect.left}px`
+    sty.top = `${rect.top}px`
+
+    const onMouseMove = (e2) => {
+      const w = dialog.offsetWidth
+      const h = dialog.offsetHeight
+      const maxL = Math.max(0, document.documentElement.clientWidth - w)
+      const maxT = Math.max(0, document.documentElement.clientHeight - h)
+      let left = e2.clientX - offsetX
+      let top = e2.clientY - offsetY
+      if (left < 0) left = 0
+      if (left > maxL) left = maxL
+      if (top < 0) top = 0
+      if (top > maxT) top = maxT
+      sty.left = `${left}px`
+      sty.top = `${top}px`
+    }
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    e.preventDefault()
+  }
+
+  header.addEventListener('mousedown', onMouseDown)
+  return () => header.removeEventListener('mousedown', onMouseDown)
+}
+
+export default {
+  inserted(el) {
+    Vue.nextTick(() => {
+      if (typeof el._dialogDragUnbind === 'function') {
+        el._dialogDragUnbind()
+      }
+      el._dialogDragUnbind = bindDrag(el)
+    })
+  },
+  unbind(el) {
+    if (typeof el._dialogDragUnbind === 'function') {
+      el._dialogDragUnbind()
+      delete el._dialogDragUnbind
+    }
+  }
+}