免费个人网站在线制作,建站公司收费标准,da面板做两个网站,网站特色点击空白处不隐藏弹窗#xff0c;点击弹窗里的‘x’和取消按钮关闭弹窗。os#xff1a;人家都是让点击空白处隐藏弹窗#xff0c;为啥我们的需求有点另类#xff1f;#xff01;木有办法~大佬有需求#xff0c;小小程序员只能领命。。。话说#xff0c;element的el-dial…点击空白处不隐藏弹窗点击弹窗里的‘x’和取消按钮关闭弹窗。os人家都是让点击空白处隐藏弹窗为啥我们的需求有点另类木有办法~大佬有需求小小程序员只能领命。。。话说element的el-dialog组件是不是自身带有点击页面空白隐藏弹窗的功能反正我没写点击空白时小弹窗童鞋就自己隐身了~也没有深究来上解决需求的代码~el-dialog refdialog :visible.synccompactDialog width1000px/el-dialogdata() {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() // 阻止冒泡})
},啰嗦了不过是切身体会该章节完结。。。
