实现ElementUI的Dialog弹窗可以拖拽移动

实现ElementUI的Dialog弹窗可以拖拽移动

ElementUI的Dialog 对话框默认的位置是在屏幕居中靠上方并且不允许拖拽移动的（如下图所示）

我么可以使用vue的自定义指令，绑定到需要拖拽移动的el-dialog组件上，在自定义指令中处理弹框拖拽。

（最终实现结果如下图所示）

实现步骤

1.创建自定义指令

/directive/el-dragDialog/index.js

import drag from './drag'

const install = function(Vue) {
   
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
   
  window['el-drag-dialog'] = drag
  Vue.use(install);
}

drag.install = install
export default drag

/directive/el-dragDialog/drag.js

export default{
   
  bind(el, binding, vnode) {
   
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText