vue如何實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉目標(biāo)區(qū)域

這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉目標(biāo)區(qū)域，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉目標(biāo)區(qū)域

解決思路

方法一

1、vue模塊中的內(nèi)容  -- class為myPanel的div是我們要處理的那個(gè)小組件。

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

2、定義點(diǎn)擊事件 -- 直接在生命周期鉤子函數(shù)mounted(dom掛載完成之后)中添加點(diǎn)擊事件，通過判斷目標(biāo)元素的class名稱可實(shí)現(xiàn)對(duì)應(yīng)的效果

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

方法二

1、vue模塊中的內(nèi)容  -- class為myPanel的div是我們要處理的那個(gè)小組件。其中，stop修飾符是用來阻止函數(shù)的傳遞，簡單理解就是執(zhí)行自身綁定的事件，不影響其他位置綁定的事件。此處clickPanel函數(shù)中可不做任何處理，單純用來阻止點(diǎn)擊事件傳遞到綁定在body上的click事件去。

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

2、通過watch監(jiān)聽panelShow的值，對(duì)應(yīng)在body綁定點(diǎn)擊事件/取消綁定的點(diǎn)擊事件

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

注：也可以通過給body綁定一個(gè)點(diǎn)擊事件，然后去判斷點(diǎn)擊的元素是否是需要隱藏掉的元素。

vue點(diǎn)擊組件外部隱藏組件自身

在開發(fā)組件的時(shí)候，點(diǎn)擊組件外部隱藏組件自身的這種情況很長見到，例如：時(shí)間選擇框組件，下拉選件等。

示圖:點(diǎn)擊外層元素隱藏自定義車牌選擇框

代碼如圖中所寫

核心

1、最外層div中添加一個(gè)@click.stop（取消事件冒泡），可以不添加事件名。

2、在mounted給body添加一個(gè)點(diǎn)擊事件，事件觸發(fā)組件的隱藏。

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

關(guān)于“vue如何實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉目標(biāo)區(qū)域”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。