ElementUI的Dialog弹窗实现全局命令拖拽移动功能

首先创建elementui的dialog组件

  这是一段信息
  
    取 消
    确 定
  

其次在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;
            }
        }
    }
})

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

mport Vue from 'vue'
import Element from 'element-ui'
import './styles/element-variables.scss'

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import i18n from './lang' // internationalization
import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log
import './utils/directive' //引入全局拖拽

import * as filters from './filters' // global filters

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})
// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

最后只需要在el-dialog组件上添加属性v-dialogDrag

    这是一段信息
    
        取 消
        确 定
    

现在这样效果是实现了，但是会有一个问题就是每次重新打开不是居中的有点小bug，可以直接v-if判断一下，条件和:visible.sync="dialogVisible"是一样的，这样每次关闭都回到原来的位置

    这是一段信息
    
        取 消
        确 定