您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)利用vue怎么實(shí)現(xiàn)一個(gè)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
首頁在外層容器里面取一個(gè)名字為main,即ref="main",當(dāng)bankSwitch為true的時(shí)候,彈窗出現(xiàn)
<div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗里面的內(nèi)容部分 </div> </div>
所觸發(fā)的事件如下:
首頁,先在全局創(chuàng)建一個(gè)點(diǎn)擊事件:bodyCloseMenus
事件作用:當(dāng)點(diǎn)擊main容器的時(shí)候(this.refs.main && !this.refs.main.contains(e.target)),并且彈窗出現(xiàn)的時(shí)候(self.bankSwitch == true),點(diǎn)擊空白區(qū)域?qū)棿瓣P(guān)閉(self.bankSwitch = false)
最后,在頁面注銷前,將點(diǎn)擊事件給移除
mounted() { document.addEventListener("click", this.bodyCloseMenus); }, methods:{ bodyCloseMenus(e) { let self = this; if (this.$refs.main && !this.$refs.main.contains(e.target)) { if (self.bankSwitch == true){ self.bankSwitch = false; } } }, beforeDestroy() { document.removeEventListener("click", this.bodyCloseMenus); },
首頁在外層容器里面定義一個(gè)阻止冒泡事件,即@click.stop,當(dāng)bankSwitch為true的時(shí)候,彈窗出現(xiàn)
<div class="selectedBorder" @click.stop> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗里面的內(nèi)容部分 </div> </div>
所觸發(fā)的事件如下:
首頁,先在全局創(chuàng)建一個(gè)點(diǎn)擊事件:bodyCloseMenus
事件作用:當(dāng)彈窗出現(xiàn)的時(shí)候(self.bankSwitch == true),點(diǎn)擊空白區(qū)域?qū)棿瓣P(guān)閉(self.bankSwitch = false)
最后,在頁面注銷前,將點(diǎn)擊事件給移除
mounted() { document.addEventListener("click", this.bodyCloseMenus); }, methods:{ bodyCloseMenus(e) { let self = this; if (self.bankSwitch == true){ self.bankSwitch = false; } }, beforeDestroy() { document.removeEventListener("click", this.bodyCloseMenus); },
看完上述內(nèi)容,你們對(duì)利用vue怎么實(shí)現(xiàn)一個(gè)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。