腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線(xiàn)工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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

更新時(shí)間：2022年03月26日 16:43:57 作者：545龍哥哥

這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

點(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)擊事件，通過(guò)判斷目標(biāo)元素的class名稱(chēng)可實(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修飾符是用來(lái)阻止函數(shù)的傳遞，簡(jiǎn)單理解就是執(zhí)行自身綁定的事件，不影響其他位置綁定的事件。此處clickPanel函數(shù)中可不做任何處理，單純用來(lái)阻止點(diǎn)擊事件傳遞到綁定在body上的click事件去。

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

2、通過(guò)watch監(jiān)聽(tīng)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', () => {});
? ? }
? }
}

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

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

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

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

代碼如圖中所寫(xiě)

核心

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

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

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片