vue項目實現(xiàn)點擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
更新時間：2022年03月26日 16:43:57 作者：545龍哥哥
這篇文章主要介紹了vue項目實現(xiàn)點擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
點擊目標(biāo)區(qū)域之外可關(guān)閉目標(biāo)區(qū)域
解決思路
方法一
1、vue模塊中的內(nèi)容 -- class為myPanel的div是我們要處理的那個小組件。
<template> ? ? <div class="hello"> ? ? ? ? <div class="myPanel" v-if="panelShow"></div> ? ? </div> </template>
2、定義點擊事件 -- 直接在生命周期鉤子函數(shù)mounted(dom掛載完成之后)中添加點擊事件，通過判斷目標(biāo)元素的class名稱可實現(xiàn)對應(yīng)的效果
mounted(){
? ? document.addEventListener('click', (e)=> {
? ? ? ? if (e.target.className != 'myPanel') {
? ? ? ? ? ? this.panelShow= false;
? ? ? ? }
? ? })
}方法二
1、vue模塊中的內(nèi)容 -- class為myPanel的div是我們要處理的那個小組件。其中，stop修飾符是用來阻止函數(shù)的傳遞，簡單理解就是執(zhí)行自身綁定的事件，不影響其他位置綁定的事件。此處clickPanel函數(shù)中可不做任何處理，單純用來阻止點擊事件傳遞到綁定在body上的click事件去。
<template> ? ? <div class="hello"> ? ? ? ? <div @click.stop="clickPanel" class="myPanel" v-if="panelShow"></div> ? ? </div> </template>
2、通過watch監(jiān)聽panelShow的值，對應(yīng)在body綁定點擊事件/取消綁定的點擊事件
watch: {
? panelShow(val) {
? ? if(val) {
? ? ? document.body.addEventListener('click', () => {
? ? ? ? ? this.panelShow = false;
? ? ? })
? ? } else {
? ? ? document.body.removeEventListener('click', () => {});
? ? }
? }
}注：也可以通過給body綁定一個點擊事件，然后去判斷點擊的元素是否是需要隱藏掉的元素。
vue點擊組件外部隱藏組件自身
在開發(fā)組件的時候，點擊組件外部隱藏組件自身的這種情況很長見到，例如：時間選擇框組件，下拉選件等。
示圖:點擊外層元素隱藏自定義車牌選擇框
代碼如圖中所寫
核心
1、最外層div中添加一個@click.stop（取消事件冒泡），可以不添加事件名。
2、在mounted給body添加一個點擊事件，事件觸發(fā)組件的隱藏。
document.body.addEventListener('click', () => {
this.show = false;
}, false);以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取吧2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue使用動畫實現(xiàn)滾動表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue插件draggable實現(xiàn)拖拽移動圖片順序
這篇文章主要為大家詳細(xì)介紹了vue插件draggable實現(xiàn)拖拽移動圖片順序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Vue axios庫避免重復(fù)發(fā)送請求的示例介紹
Axios是一個基于promise的HTTP庫，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請求庫之一,我們封裝axios請求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02
vue-amap是對高德地圖JS API進(jìn)行封裝的、適用于vue項目的地圖組件庫，本文主要介紹了vue-amap引入高德JS API的原理，具有一定的參考價值，感興趣的可以了解一下2022-06-06
這篇文章主要介紹了TypeScript在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue3組合式API獲取子組件屬性和方法的代碼實例,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
在開發(fā)Vue應(yīng)用時,我們經(jīng)常需要在多個組件中復(fù)用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫中導(dǎo)入的,下面我們就來看看如何正確引用和使用外部方法吧2024-01-01
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10