element dialog 弹框移动 ------- 目前弹框移动流畅度感觉有问题，有好建议的希望评论一下

import elementUi from "element-ui";
const element = {
    install(Vue) {
        elementUi.Dialog.mounted = function () {
            let dialog = this.$refs.dialog;
            let dialogHeader = dialog.querySelector(".el-dialog__header");
            // 修改鼠标移动到dialogHeader时的效果
            dialogHeader.style.cursor = "move";
            // 清除按下时选中文字效果
            dialogHeader.onselectstart = new Function("return false");
            // dialog 到顶部的高度
            let offsetTop = "";
            let flag = true;
            // 判断dialogHeader是否存在
            if (dialogHeader) {
                // dialogHeader 按下时触发
                dialogHeader.onmousedown = function (el) {
                    // dialogHeader 鼠标到屏幕左侧和顶部的距离
                    let clientX = el.clientX;
                    let clientY = el.clientY;
                    // （屏幕实际宽度 - dialog宽度）/ 2 = dialog默认位置到屏幕左侧的宽度
                    let clientWidth = document.body.clientWidth;
                    let dialogWidth = dialog.clientWidth;
                    let stateX = (clientWidth - dialogWidth) / 2;
                    // 屏幕实际高度 - dialog高度 = 屏幕除去dialog的高度，剩余高度
                    let clientHeight = document.body.clientHeight;
                    let dialogHeight = dialog.clientHeight;
                    let height = clientHeight - dialogHeight;
                    if (flag) {
                        offsetTop = dialog.offsetTop;
                        flag = false;
                    };
                    // dialog 到底部的高度
                    let stateY = height - offsetTop;
                    // dialog 到自身起点的距离
                    let x = dialog.style.left.replace(/\px/g, "");
                    let y = dialog.style.top.replace(/\px/g, "");
                    // 点击dialog头部移动时触发
                    dialogHeader.onmousemove = function (e) {
                        // 鼠标点击位置到屏幕边缘的距离 - 移动的距离 = 新的鼠标到屏幕边缘的距离
                        let moveX = clientX - e.clientX;
                        let moveY = clientY - e.clientY;
                        // 鼠标到dialog自身起点的距离 - 鼠标到屏幕边缘的距离 = dialog到屏幕边缘移动的距离
                        let leftX = x - moveX;
                        let topY = y - moveY;
                        // leftX 是以dialog默认位置为左上起点的，所以需要取绝对值
                        if (Math.abs(leftX) > stateX) {
                            // 左侧边缘
                            if (leftX < 0) {
                                leftX = -stateX;
                            };
                            // 右侧边缘
                            if (leftX > 0) {
                                leftX = stateX;
                            };
                        };
                        // 上侧边缘
                        if (topY < 0) {
                            if (Math.abs(topY) > offsetTop) {
                                topY = - offsetTop;
                            };
                        };
                        // 下侧边缘
                        if (topY > 0) {
                            if (Math.abs(topY) > stateY) {
                                topY = stateY;
                            };
                        };
                        dialog.style.left = leftX + "px";
                        dialog.style.top = topY + "px";
                    };
                    // dialogHeader 鼠标抬起触发
                    document.onmouseup = function () {
                        dialogHeader.onmousemove = null;
                        document.onmouseup = null;
                    };
                };
            };
        };
        Vue.use(elementUi);
    }
};
export default element;