vue v-dialogDrag自定义指令 + element-ui: 实现弹窗拖拽组件

有一个dialog弹框，弹框的背景并不是全屏的，只在除header，sidebar的地方显示，要求拖拽dialog弹框不能超过背景。

在components/common创建directives.js，具体代码如下:

import Vue from 'vue';

// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
   
    bind(el, binding, vnode, oldVnode) {
   
        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 sty = (() => {
   
            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