利用vue怎么實現一個點擊空白區域關閉彈窗的功能

今天就跟大家聊聊有關利用vue怎么實現一個點擊空白區域關閉彈窗的功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

1. 第一種做法

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

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

所觸發的事件如下：

首頁，先在全局創建一個點擊事件:bodyCloseMenus

事件作用：當點擊main容器的時候（this.refs.main && !this.refs.main.contains(e.target)），并且彈窗出現的時候（self.bankSwitch == true），點擊空白區域將彈窗關閉（self.bankSwitch = false）

最后，在頁面注銷前，將點擊事件給移除

 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,當bankSwitch為true的時候，彈窗出現

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

所觸發的事件如下：

首頁，先在全局創建一個點擊事件:bodyCloseMenus

事件作用：當彈窗出現的時候（self.bankSwitch == true），點擊空白區域將彈窗關閉（self.bankSwitch = false）

最后，在頁面注銷前，將點擊事件給移除

 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);
 },

看完上述內容，你們對利用vue怎么實現一個點擊空白區域關閉彈窗的功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。