vue如何實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗
更新時間：2025年04月18日 10:17:55 作者：前端學(xué)習(xí)zzz
這篇文章主要介紹了vue如何實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗
效果展示
通過contains判斷點(diǎn)擊區(qū)域是否包含彈框
<template>
<div ref="list">
<span @click="is_list_show=!is_list_show">點(diǎn)擊</span>
<ul class="head-list-select" v-if="is_list_show">
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
<li>菜單4</li>
<li>菜單5</li>
</ul>
</div>
</template>點(diǎn)擊頁面判斷
mounted(){
document.addEventListener("click", this.bodyCloseMenus)
},
beforeDestroy() { // 在頁面注銷前，刪除點(diǎn)擊事件
document.removeEventListener("click", this.bodyCloseMenus);
},
methods: {
bodyCloseMenus(e){
let btnstatus = this.$refs['list'];
if(btnstatus &&!btnstatus.contains(e.target)){
this.is_list_show = false;
}
}
},剛開始寫的時候只想到這種方法，后來百度了一下還有一種通過阻止冒泡@click.stop來實(shí)現(xiàn)，嘗試了一下可以實(shí)現(xiàn)，順便就記錄一下~
<template>
<div ref="list" @click.stop>
<span @click="is_list_show=!is_list_show">點(diǎn)擊</span>
<ul class="head-list-select" v-if="is_list_show">
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
<li>菜單4</li>
<li>菜單5</li>
</ul>
</div>
</template>mounted(){
document.addEventListener("click", this.bodyCloseMenus)
},
beforeDestroy() {
document.removeEventListener("click", this.bodyCloseMenus);
},
methods: {
bodyCloseMenus(e){
let self = this;
if (self.is_list_show == true){
self.is_list_show = false;
}
}
},總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案
這篇文章主要介紹了vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案,如果只有一個匿名v-model的傳遞的話,可以使用vue3.3新添加的編譯宏,defineModel來使用,每種方案結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
EventBus稱為事件總線,當(dāng)兩個組件屬于不同的兩個組件分支,或者兩個組件沒有任何聯(lián)系的時候,不想使用Vuex這樣的庫來進(jìn)行數(shù)據(jù)通信,就可以通過事件總線來進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了在vue里如何使用pug模板引擎,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3新擬態(tài)組件庫開發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫開發(fā)流程——table組件源碼,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
axios無法加載響應(yīng)數(shù)據(jù):no?data?found?for?resource?with?given?i
最近在在做一個小查詢功能的時候踩了一個坑,所以這篇文章主要給大家介紹了關(guān)于axios無法加載響應(yīng)數(shù)據(jù):no?data?found?for?resource?with?given?identifier報錯的解決方法,需要的朋友可以參考下2022-11-11
uniapp使用scroll-view下拉刷新無法取消的坑及解決
這篇文章主要介紹了uniapp使用scroll-view下拉刷新無法取消的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄,本文通過場景分析給大家分享解決方法，需要的朋友可以參考下2022-08-08
在vue項(xiàng)目中有時會使用到Base6464轉(zhuǎn)碼,現(xiàn)將自己使用的一種方法記錄下來,對vue使用Base64相關(guān)知識感興趣的朋友一起看看吧2024-02-02
這篇文章主要給大家介紹了關(guān)于通用vue組件化登錄頁面的相關(guān)資料,文中通過圖文以及實(shí)例代碼將解決的辦法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08
插槽（Slot）是 Vue 提供的一個強(qiáng)大的內(nèi)容分發(fā)機(jī)制,允許父組件向子組件注入內(nèi)容,它使得組件更加靈活和可復(fù)用,這篇文章主要介紹了Vue3 插槽Slot指南及使用舉例,需要的朋友可以參考下2025-05-05