Element UI Dialog实现位置可拖拽（自定义指令方法）

前言

由于Dialog面积很大，覆盖了视口大部分面积，而有时确实需要让Dialog可拖拽，以便在不关闭的前提下，能看到下方的内容。这里我提供一个自定义指令，实现这个要求。

src/directive/drag-dialog/index.js

import dragDialog from './drag-dialog'

const install = function (Vue) {
  Vue.directive('drag-dialog', dragDialog)
}

if (window.Vue) {
  window.dragDialog = dragDialog
  Vue.use(install); // eslint-disable-line
}

dragDialog.install = install
export default dragDialog

src/directive/drag-dialog/drag-dialog.js

export default {
  bind(el) {
    el.getElementsByClassName('el-dialog__header')[0].style.cursor = 'move';
    el.getElementsByClassName('el-dialog__header')[0].addEventListener('mousedown', function(e) {
      const elDialog = el.getElementsByClassName('el-dialog')[0];
      const initClientX = e.clientX;
      const initClientY = e.clientY;
      const initStyleLeft = elDialog.style.left ? elDialog.style.left.replace('px','') - 0 : 0;
      const initStyleTop = elDialog.style.top ? elDialog.style.top.replace('px','') - 0 : 0;

      document.onmousemove = function(e){
        const moveX = e.clientX - initClientX + initStyleLeft;
        const moveY = e.clientY - initClientY + initStyleTop;
        elDialog.style.left = moveX + "px";
        elDialog.style.top = moveY + "px";
      }

      document.onmouseup = function(e){
        document.onmousemove = null;
        document.onmouseup = null;
      };
      // 不加return false的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
      return false;
    }, false)
  },
  update(el, binding, vnode, old) {
    // 实现每次打开 Dialog 都复位到中央
    setTimeout(() => {
      if (el.style.display === 'none') {
        el.getElementsByClassName('el-dialog')[0].style.top = '';
        el.getElementsByClassName('el-dialog')[0].style.left = '';
      }
    }, 333); // Dialog 的关闭动画用时 300 毫秒，因此这里需要延迟执行，而且要多延迟一点点
  },
}

使用

1. import这个index

2. 加入自定义指令

3. 给加上v-drag-dialog