目录

elementUI中对话框意外关闭问题

2021年07月02日约 497 字预计阅读 1 分钟次阅读

目录

问题分析

el-dialog的closeOnclickModal绑定的是click事件，当在弹框内mousedown，拖拽到弹窗外mouseup时，也会触发click事件，导致弹窗被意外关闭。因此在全局通用常量src/utils/global.js中覆盖dialog组件，把closeOnclickModal的默认值设置为false

解决实例p[]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import globalConst from 'src/config/globals.js' //引入全局常量
// src/config/globals.js 全局常量文件引入到`src/utils/global.js`，`src/utils/global.js`再引入到`main.js`
// export default {
//     'PAGE_SIZE':20,
//     'EMPTY_TXT':'暂无数据',//在vue文件中使用，:empty-text='$_g.EMPTY_TXT', :page-size='$_g.PAGE_SIZE',在`data`里面`pageSize:this.$_g.PAGE_SIZE`
//     'PAGESIGES':[10,20,30],
//     'APPID':'hdjx73649247'
// }
import {Dialog} from 'element-ui'
import Vue from 'vue'

// 此处可引入全局filters

//全局混入
export default {
    install: function(Vue){
        Vue.prototype.$_g =globalConst
        Vue.component('el-dialog',{
            extends:Dialog,
            props:{
                ...this.props,
                closeOnClickModal:{
                    type:Boolean,
                    default:false
                }
            }
        })
    }
}