1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element ui点击按钮弹出款_VUE+elementUI 点击页面空白处弹窗不隐藏

element ui点击按钮弹出款_VUE+elementUI 点击页面空白处弹窗不隐藏

时间:2022-11-26 00:54:22

相关推荐

element ui点击按钮弹出款_VUE+elementUI 点击页面空白处弹窗不隐藏

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

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

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

data() {

return {

compactDialog: false // 弹窗隐藏

}

},

mounted() {

const that = this // 存一下this(因为下面的点击事件等于又包了一层),this要保证指向当前页面

document.addEventListener('click', function(e) {

// 点击空白处让弹窗状态为显示

pactDialog = 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() // 阻止冒泡

})

},

啰嗦了,不过是切身体会,该章节完结。。。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。