Dialog组件拖拽自动关闭

在使用Element-ui的Dialog组件时，当弹框内有表单，用户不小心想复制个内容，拖动光标，最后光标落点在dialog或者drawer的遮罩层，导致弹框关闭，而将用户辛苦填写的内容给清除掉。 我们可以通过extends Element-ui中的Dialog组件来对其handleWrapperClick方法进行重写

import { Dialog, Drawer } from 'element-ui'

const DialogPathed = {
    extends: Dialog,
    data() {
        return {
            wrapperMouseDowned: false
        }
    },
    mounted() {
        this.$el.onmounsedown = (e) => {
            this.wrapperMouseDowned = e.target.classList.contains('el-dialog__wrapper')
        }
    },
    methods: {
        // 重写dialog的handleWrapperClick方法
        handleWrapperClick() {
            if (!this.closeOnClickModal || !this.handleWrapperClick) return
            this.handleClose()
        }
    }
}

然后只需在main.js中引入，问题可以解决了。