vue專案實現點選目標區域之外可關閉(隱藏)目標區域

2022-03-26 19:00:29

點選目標區域之外可關閉目標區域

解決思路

方法一

1、vue模組中的內容 -- class為myPanel的div是我們要處理的那個小元件。

<template>
    <div class="hello">
        <div class="myPanel" v-if="panelShow"></div>
    </div>
</template>

2、定義點選事件 -- 直接在生命週期勾點函數mounted(dom掛載完成之後)中新增點選事件，通過判斷目標元素的class名稱可實現對應的效果

mounted(){
    document.addEventListener('click', (e)=> {
        if (e.target.className != 'myPanel') {
            this.panelShow= false;
        }
    })
}

方法二

1、vue模組中的內容 -- class為myPanel的div是我們要處理的那個小元件。其中，stop修飾符是用來阻止函數的傳遞，簡單理解就是執行自身繫結的事件，不影響其他位置繫結的事件。此處clickPanel函數中可不做任何處理，單純用來阻止點選事件傳遞到繫結在body上的click事件去。

<template>
    <div class="hello">
        <div @click.stop="clickPanel" class="myPanel" v-if="panelShow"></div>
    </div>
</template>

2、通過watch監聽panelShow的值，對應在body繫結點選事件/取消繫結的點選事件

watch: {
  panelShow(val) {
    if(val) {
      document.body.addEventListener('click', () => {
          this.panelShow = false;
      })
    } else {
      document.body.removeEventListener('click', () => {});
    }
  }
}

注：也可以通過給body繫結一個點選事件，然後去判斷點選的元素是否是需要隱藏掉的元素。

vue點選元件外部隱藏元件自身

在開發元件的時候，點選元件外部隱藏元件自身的這種情況很長見到，例如：時間選擇框元件，下拉選件等。

示圖:點選外層元素隱藏自定義車牌選擇框

程式碼如圖中所寫

核心

1、最外層div中新增一個@click.stop（取消事件冒泡），可以不新增事件名。

2、在mounted給body新增一個點選事件，事件觸發元件的隱藏。

    document.body.addEventListener('click', () => {
        this.show = false;
    }, false);

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。