实现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