溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

利用vue怎么實(shí)現(xiàn)一個(gè)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的功能

發(fā)布時(shí)間:2020-12-31 15:41:30 來源:億速云 閱讀:501 作者:Leah 欄目:開發(fā)技術(shù)

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

1. 第一種做法

首頁在外層容器里面取一個(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);
 },

2.第二種做法

首頁在外層容器里面定義一個(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è)資訊頻道,感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(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)容。

AI