溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vuejs如何關閉彈窗”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vuejs如何關閉彈窗”這篇文章吧。
vuejs關閉彈窗的方法：1、創建html代碼結構；2、判斷所點擊的區域是否在“.mask_popup”中；3、通過“hideMaskPopup(e){...}”關閉彈窗即可。
本文操作環境：windows7系統、vue2.5.17版，DELL G3電腦。
vuejs怎么關閉彈窗?
vue.js點擊彈窗以外的區域關閉彈窗
點擊彈窗外的區域關閉彈窗的代碼結構
html:
<p class="publish_mask_popup" @click="hideMaskPopup" v-show="showMaskPopup"> <p class="mask_popup"> 內容代碼..... </p> </p>
js:
data(){
showMaskPopup:false
},
methods: {
hideMaskPopup(e){
let mask = document.querySelector(".mask_popup");
if (mask) {
if (!mask.contains(e.target)) {//判斷所點擊的區域是否在.mask_popup中
this.showMaskPopup = false;
}
}
}
},實現效果：
以上是“vuejs如何關閉彈窗”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
