elementui拖拽对话框_Element UI Dialog实现位置可拖拽（自定义指令方法）

前言

由于Dialog面积很大，覆盖了视口大部分面积，而有时确实需要让Dialog可拖拽，以便在不关闭的前提下，能看到下方的内容。这里我提供一个自定义指令，实现这个要求。

src/directive/drag-dialog/index.js

import dragDialog from './drag-dialog'

const install = function (Vue) {

Vue.directive('drag-dialog', dragDialog)

}

if (window.Vue) {

window.dragDialog = dragDialog

Vue.use(install); // eslint-disable-line

}

dragDialog.install = install

export default dragDialog

src/directive/drag-dialog/drag-dialog.js

export default {

bind(el) {

el.getElementsByClassName('el-dialog__header')[0].style.cursor = 'move';

el.getElementsByClassName('el-dialog__header')[0].addEventListener('mousedown', function(e) {

const elDialog = el.getElementsByClassName('el-dialog')[0];

const initClientX = e.clientX;

const initClientY = e.clientY;

const initStyleLeft = elDialog.style.left ? elDialog.style.left.replace('px','') - 0 : 0;

const initStyleTop = elDialog.style.top ? elDialog.style.top.replace('px','') - 0 : 0;

document.onmousemove = function(e){

const moveX = e.clientX - initClientX + initStyleLeft;

const moveY = e.clientY - initClientY + initStyleTop;

elDialog.style.left = moveX + "px";

elDialog.style.top = moveY + "px";

}

document.onmouseup = function(e){

document.onmousemove = null;

document.onmouseup = null;

};

// 不加return false的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效

return false;

}, false)

},

update(el, binding, vnode, old) {

// 实现每次打开 Dialog 都复位到中央

setTimeout(() => {

if (el.style.display === 'none') {

el.getElementsByClassName('el-dialog')[0].style.top = '';

el.getElementsByClassName('el-dialog')[0].style.left = '';

}

}, 333); // Dialog 的关闭动画用时 300 毫秒，因此这里需要延迟执行，而且要多延迟一点点

},

}

使用

import这个index

加入自定义指令

给加上v-drag-dialog