利用vue怎么實(shí)現(xiàn)一個點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)利用vue怎么實(shí)現(xiàn)一個點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都發(fā)電機(jī)回收小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站設(shè)計(jì)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

1. 第一種做法

首頁在外層容器里面取一個名字為main，即ref="main",當(dāng)bankSwitch為true的時候，彈窗出現(xiàn)

<div class="selectedBorder" ref="main">
	<div class="bankItem" v-if="bankSwitch == true">
		你好我是彈窗里面的內(nèi)容部分
 	</div>
</div>

所觸發(fā)的事件如下：

首頁，先在全局創(chuàng)建一個點(diǎn)擊事件:bodyCloseMenus

事件作用：當(dāng)點(diǎn)擊main容器的時候（this.refs.main && !this.refs.main.contains(e.target)），并且彈窗出現(xiàn)的時候（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);
 },

2.第二種做法

首頁在外層容器里面定義一個阻止冒泡事件，即@click.stop,當(dāng)bankSwitch為true的時候，彈窗出現(xiàn)

<div class="selectedBorder" @click.stop>
	<div class="bankItem" v-if="bankSwitch == true">
		你好我是彈窗里面的內(nèi)容部分
 	</div>
</div>

所觸發(fā)的事件如下：

首頁，先在全局創(chuàng)建一個點(diǎn)擊事件:bodyCloseMenus

事件作用：當(dāng)彈窗出現(xiàn)的時候（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)容，你們對利用vue怎么實(shí)現(xiàn)一個點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：利用vue怎么實(shí)現(xiàn)一個點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://muchs.cn/article30/eicpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、搜索引擎優(yōu)化、網(wǎng)站改版、網(wǎng)站制作、全網(wǎng)營銷推廣、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)