在使用element开发通过之中使用Dialog弹窗创建数据或者数据回显在经常不过了。而且数据创建和数据编辑正常都是使用同一组件。

出现的问题：

title="提示弹窗"

:visible.sync="dialogVisible"

width="30%"

destroy-on-close>

使用dialog 提供的 属性 destroy-on-close 也并不能实现实时的dialog销毁，进行创建和编辑数据正常的切换，这时就可以使用强大的v-if进行dialog 直接销毁操作这个办法还是十分有效。代码如下：

title="提示弹窗"

v-if="dialogVisible"

:visible.sync="dialogVisible"

width="30%"

destroy-on-close>

拓展知识(dialog弹窗拖拽)：

vue目录:src/utils/directives.js

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽

Vue.directive('dialogDrag', {

bind(el, binding, vnode, oldVnode) {

const dialogHeaderEl = el.querySelector('.ant-modal-header');

const dragDom = el.querySelector('.ant-modal');

dialogHeaderEl.style.cursor = 'move';

// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);

const sty = (() => {

if (window.document.currentStyle) {

return (dom, attr) => dom.currentStyle[attr];

} else {

return (dom, attr) => getComputedStyle(dom, false)[attr];

}

})();

dialogHeaderEl.onmousedown = (e) => {

// 鼠标按下，计算当前元素距离可视区的距离

const disX = e.clientX - dialogHeaderEl.offsetLeft;

const disY = e.clientY - dialogHeaderEl.offsetTop;

const screenWidth = document.body.clientWidth; // body当前宽度

const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)

const dragDomWidth = dragDom.offsetWidth; // 对话框宽度

const dragDomheight = dragDom.offsetHeight; // 对话框高度

const minDragDomLeft = dragDom.offsetLeft;

const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

const minDragDomTop = dragDom.offsetTop;

const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;

// 获取到的值带px 正则匹配替换

let styL = sty(dragDom, 'left');

let styT = sty(dragDom, 'top');

// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px

if (styL.includes('%')) {

styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);

styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);

} else {

styL = +styL.replace(/\px/g, '');

styT = +styT.replace(/\px/g, '');

};

document.onmousemove = function(e) {

// 通过事件委托，计算移动的距离

let left = e.clientX - disX;

let top = e.clientY - disY;

// 边界处理

if (-(left) > minDragDomLeft) {

left = -(minDragDomLeft);

} else if (left > maxDragDomLeft) {

left = maxDragDomLeft;

}

if (-(top) > minDragDomTop) {

top = -(minDragDomTop);

} else if (top > maxDragDomTop) {

top = maxDragDomTop;

}

// 移动当前元素

dragDom.style.left = `${left + styL}px`;

dragDom.style.top = `${top + styT}px`;

// 将此时的位置传出去

// binding.value({x:e.pageX,y:e.pageY})

}

document.onmouseup = function(e) {

document.onmousemove = null;

document.onmouseup = null;

}

}

}

})

// v-dialogDragWidth: 弹窗宽度拖大 拖小

Vue.directive('dialogDragWidth', {

bind(el, binding, vnode, oldVnode) {

const dragDom = binding.value.$el.querySelector('.el-dialog')

el.onmousedown = (e) => {

// 鼠标按下，计算当前元素距离可视区的距离

const disX = e.clientX - el.offsetLeft

document.onmousemove = function(e) {

e.preventDefault() // 移动时禁用默认事件

// 通过事件委托，计算移动的距离

const l = e.clientX - disX

dragDom.style.width = `${l}px`

}

document.onmouseup = function(e) {

document.onmousemove = null

document.onmouseup = null

}

}

}

})

在main.js中进入即可使用

import '@/utils/directives.js'

使用案列：

title="提示弹窗"

v-dialogDrag // 添加这句话就够了

v-if="dialogVisible"

:visible.sync="dialogVisible"

width="30%">

注意事项： 在使用dialog弹窗拖拽并且也使用了 el-popover 时务必要使用v-if 进行每次销毁，否则会出现第二次弹窗拖拽不生效。

以上就是我对Dialog销毁的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。