在使用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銷毀的理解,如果文章由于我學識淺薄,導致您發現有嚴重謬誤的地方,請一定在評論中指出,我會在第一時間修正我的文章,以避免誤人子弟。

總結

以上是生活随笔為你收集整理的dialog element 删掉标题_ElementUI 销毁Dialog数据(简单粗暴)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。