如何通过自定义指令实现ElementUI消息框的拖拽功能？

export default {
  bind(el, binding, vnode) {
    const dialogHeader = el.querySelector('.el-dialog__header');
    const dialog = el.querySelector('.el-dialog');
    dialogHeader.style.cursor = 'move';
    dialog.style.top = '0px';

    const getStyle = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr];
      } else {
        return (dom, attr) => window.getComputedStyle(dom, null)[attr];
      }
    })();

    dialogHeader.onmousedown = (e) => {
      const disX = e.clientX - dialogHeader.offsetLeft;
      const disY = e.clientY - dialogHeader.offsetTop;
      const dragWidth = dialog.offsetWidth;
      const dragHeight = dialog.offsetHeight;
      const screenWidth = document.body.clientWidth;
      const screenHeight = document.body.clientHeight;
      let minLeft = 0;
      let maxLeft = screenWidth - dragWidth;
      let minTop = 0;
      let maxTop = screenHeight - dragHeight;

      let originalLeft = parseInt(getStyle(dialog, 'left'), 10) || 0;
      let originalTop = parseInt(getStyle(dialog, 'top'), 10) || 0;

      document.onmousemove = (e) => {
        let left = e.clientX - disX + originalLeft;
        let top = e.clientY - disY + originalTop;

        left = Math.max(minLeft, Math.min(left, maxLeft));
        top = Math.max(minTop, Math.min(top, maxTop));

        dialog.style.left = `${left}px`;
        dialog.style.top = `${top}px`;
        vnode.child.$emit('dragDialog'); // 触发自定义事件
      };

      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
};

import drag from './drag';

const install = (Vue) => {
  Vue.directive('el-drag-dialog', drag);
};

if (typeof window !== 'undefined' && window.Vue) {
  window.elDragDialog = drag;
  window.Vue.use(install);
}

drag.install = install;
export default drag;

import elDragDialog from '@/directive/el-drag-dialog';

<el-dialog :visible.sync="dialogVisible" title="错误信息" v-el-drag-dialog>
  <!-- 弹窗内容 -->
</el-dialog>

<el-dialog :visible.sync="dialogVisible" title="错误信息" v-el-drag-dialog @dragDialog="onDragEnd">
  <!-- 弹窗内容 -->
</el-dialog>

methods: {
  onDragEnd() {
    console.log('Dialog drag ended');
    // 在这里添加拖拽结束后的操作
  }
}