點擊空白處不隱藏彈窗，點擊彈窗里的‘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() // 阻止冒泡}) },啰嗦了，不過是切身體會，該章節完結。。。 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的qtreewidget点击空白处时取消以选项_VUE+elementUI 点击页面空白处弹窗不隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。