el-dialog支持全局拖拽功能

1.首先在全局的组件实现拖拽功能，结构如下

dialogDrag.vue的内容

<script>
    export default {
        mounted() {
            // 获取当前的dialog及其header
            let aimDialog = this.$el.getElementsByClassName('el-dialog')[0];
            let aimHeader = this.$el.getElementsByClassName('el-dialog__header')[0];
            // 获取总的dialog_warpper列表
            let wrapperList = document.getElementsByClassName('el-dialog__wrapper');
 
            aimHeader.onmousedown = (e) => {
                // 用于存放当前dialog所对应的dialog_warpper
                let aimWrap = "";
                for(let i=0; i<wrapperList.length; i++) {
                    if(wrapperList[i].childNodes[0] == aimDialog) {
                        aimWrap = wrapperList[i]
                    }
                }
                // 存放dialog最终的left与top值
                let currentLeft = "";
                let currentTop = "";
 
 
                // 通过鼠标点击位置与起始offset位置，获取起始点击x，y
                let x1 = e.clientX - aimWrap.offsetLeft;
                let y1 = e.clientY - aimWrap.offsetTop;
                document.onmousemove = (e) => {
                    // 清除选中状态
                    let selection = window.getSelection();
                    selection.removeAllRanges();
                    // 获取移动后的x，y
                    currentLeft = e.clientX - x1;
                    currentTop = e.clientY - y1;
                    aimWrap.style.left = currentLeft + 'px';
                    aimWrap.style.top = currentTop + 'px';
                }
                document.onmouseup = () => {
                    let dialogLeft = aimDialog.offsetLeft;  // dialog距离dialog_wrap左侧距离
                    let dialogTop = aimDialog.offsetTop;  // dialog距离dialog_wrap左侧距离
 
                    // 当超出20px距离时回弹20px
                    // 左侧超出
                    if(currentLeft + dialogLeft + aimDialog.clientWidth < 20) {
                        currentLeft = 20 - aimDialog.clientWidth - dialogLeft
                    }
                    // 顶部超出
                    if(currentTop + dialogTop < 20) {
                        currentTop = 20 - dialogTop
                    }
                    // 右侧超出
                    if(currentLeft + dialogLeft > aimWrap.clientWidth - 20) {
                        currentLeft = dialogLeft + aimDialog.clientWidth - 20
                    }
                    // 底部超出
                    if(currentTop + dialogTop > aimWrap.clientHeight - 20) {
                        currentTop =  aimWrap.clientHeight - dialogTop - 20
                    }
 
                    aimWrap.style.left = currentLeft + 'px';
                    aimWrap.style.top = currentTop + 'px';
 
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }
    }
</script>
<style>
 .el-dialog__header {
    /* header颜色，下面是示例，可以忽略 */
    /* background-color: aqua; */
 }
 .el-dialog__wrapper {
    width: 100vw;
    height: 100vh;
 }
</style>

index.js文件

import dialogDragMixin from './dialogDrag'  
export function installDialog(Vue, Element) {
    Element.Dialog.methods.handleClose = function(){
        if(typeof this.beforeClose==='function'){
            this.beforeClose(this.hide);
        }else{
            this.hide();
        }
        // 关闭后重置dialog_warpper的position相关
        let aimDialog = this.$el.getElementsByClassName('el-dialog')[0];
        let wrapperList = document.getElementsByClassName('el-dialog__wrapper');
        let aimWrap = "";
        for(let i=0; i<wrapperList.length; i++) {
            if(wrapperList[i].childNodes[0] == aimDialog) {
                aimWrap = wrapperList[i]
            }
        }
        window.setTimeout(() => {
            if(aimWrap){
                aimWrap.style.left = 0;
                aimWrap.style.top = 0;
            }
          
        }, 500)
 
    }
    Element.Dialog.mixins.push(dialogDragMixin);  
}

在main.js里全局注册

import { installDialog } from "../src/components/common/dialog/index.js";

installDialog(Vue, ElementUI)