qtreewidget点击空白处时取消以选项_VUE+elementUI 点击页面空白处弹窗不隐藏

点击空白处隐藏弹窗,点击弹窗里的‘x’和取消按钮关闭弹窗。

os:人家都是让点击空白处隐藏弹窗,为啥我们的需求有点另类?!木有办法~大佬有需求,小小程序员只能领命。。。

话说,element的el-dialog组件是不是自身带有,点击页面空白隐藏弹窗的功能(反正我没写,点击空白时,小弹窗童鞋就自己隐身了~),也没有深究,来上解决需求的代码~

<el-dialog ref="dialog" :visible.sync="compactDialog" width="1000px"></el-dialog>

data() {
    return {
      compactDialog: false // 弹窗隐藏
    }
},


mounted() {
    const that = this // 存一下this(因为下面的点击事件等于又包了一层),this要保证指向当前页面
    document.addEventListener('click', function(e) { 
        // 点击空白处让弹窗状态为显示
        that.compactDialog = true
    })
// this.$refs.dialog.$refs.dialog vue获取dom
// 至于为什么写这么长,是因为this.$refs.dialog获取的是弹窗遮罩(遮罩100%全屏覆盖),如果在这阻止默认事件,就把document点击事件给阻止了,
// 所以this.$refs.dialog.$refs.dialog 获取的是弹窗的内容层,这样点击里面的‘x’和取消按钮就可以关闭弹窗了
    this.$refs.dialog.$refs.dialog.addEventListener('click', function(e) {
        e.stopPropagation() // 阻止冒泡
    })
},

啰嗦了,不过是切身体会,该章节完结。。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值