ElementUI 销毁Dialog数据(简单粗暴)

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

<el-dialog
  title="提示弹窗"
  :visible.sync="dialogVisible"
  width="30%"
  destroy-on-close>

</el-dialog>

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

<el-dialog
  title="提示弹窗"
  v-if="dialogVisible"
  :visible.sync="dialogVisible"
  width="30%"
  destroy-on-close>

</el-dialog>

拓展知识(dialog弹窗拖拽)：
vue目录:src/utils/directives.js

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
    bind(el, binding, vnode, oldVnode) {
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        const dragDom = el.querySelector('.el-dialog')
        dialogHeaderEl.style.cursor = 'move'

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

        dialogHeaderEl.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dialogHeaderEl.offsetLeft
            const disY = e.clientY - dialogHeaderEl.offsetTop

            // 获取到的值带px 正则匹配替换
            let styL, styT

            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
            if (sty.left.includes('%')) {
                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
            } else {
                styL = +sty.left.replace(/\px/g, '')
                styT = +sty.top.replace(/\px/g, '')
            }

            document.onmousemove = function(e) {
                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX
                const t = e.clientY - disY

                // 移动当前元素
                dragDom.style.left = `${l + styL}px`
                dragDom.style.top = `${t + 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'

使用案列：

<el-dialog
    title="提示弹窗"
    v-dialogDrag            // 添加这句话就够了
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    width="30%">
</el-dialog>

注意事项： 在使用dialog弹窗拖拽并且也使用了 el-popover 时务必要使用v-if 进行每次销毁，否则会出现第二次弹窗拖拽不生效。
以上就是我对Dialog销毁的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。