vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
點(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ù)的傳遞，簡(jiǎn)單理解就是執(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)擊組件外部隱藏組件自身的這種情況很長(zhǎng)見到，例如：時(shí)間選擇框組件，下拉選件等。
示圖:點(diǎn)擊外層元素隱藏自定義車牌選擇框
代碼如圖中所寫
核心
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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車頁面
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue 組件注冊(cè)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue 組件的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
關(guān)于vue2強(qiáng)制刷新,解決頁面不會(huì)重新渲染的問題
今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁面不會(huì)重新渲染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue?CLI是一個(gè)強(qiáng)大的開發(fā)工具,可用于快速搭建Vue.js項(xiàng)目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來看看vue?cli中如何使用自定義的組件吧2023-11-11
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點(diǎn)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue獲取初始化數(shù)據(jù)是放在created還是mounted解讀
這篇文章主要介紹了Vue獲取初始化數(shù)據(jù)是放在created還是mounted的問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
這篇文章主要介紹了詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了Vue-組件自定義事件的綁定和解綁，文中有詳細(xì)的圖文實(shí)例，對(duì)學(xué)習(xí)或工作有一定的參考價(jià)值，需要的小伙伴可以閱讀下2023-05-05