1.首先在src文件下创建utils文件，在utils文件下创建全局拖拽文件directive.js

import Vue from 'vue'
//弹窗全局拖动指令
Vue.directive('dialogDrag',{
    bind(el,binding,node,oldNode){
        const header = el.querySelector('.el-dialog__header')
        const dragEle = el.querySelector('.el-dialog')
        header.style.cursor = 'move'
 
        const currentSty = dragEle.currentSty || window.getComputedStyle(dragEle,null)
        header.onmousedown = e =>{
            const eleLeft = e.clientX - header.offsetLeft
            const eleTop = e.clientY - header.offsetTop
            let styLeft,styTop
            if(currentSty.left.includes("%")){
                styLeft += document.body.clientWidth * (+currentSty.left.replace(/\%/g,"") / 100)
                styTop += document.body.clientHeight * (+currentSty.top.replace(/\%/g,"") / 100)
            }else{
                styLeft = +currentSty.left.replace(/\px/g,"") / 100
                styTop = +currentSty.top.replace(/\px/g,"") / 100
            }
 
            document.onmousemove = function(e){
                const left = e.clientX - eleLeft;
                const top = e.clientY - eleTop;
                dragEle.style.left = `${left + styLeft}px`
                dragEle.style.top = `${top + styTop}px`
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
})

2.在main.js文件里面引用directive.js

import '@/utils/directive' //引入全局拖拽

3.在页面中使用 v-dialogDrag命令

需要注意弹框打开之后移动位置之后下次打开还会出现在上次拖动之后的位置，所有需要添加v-if及时销毁，保证每次打开之时位置固定

<el-dialog title="提示" v-if="dialogVisible" :visible.sync="dialogVisible" v-dialogDrag width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
</el-dialog>