vue3下实现点击空白区域关闭弹出层
2022年6月29日
弹出层的DOM结构如下
|
1 2 3 4 5 6 7 |
<view class="bg-white absolute top-12 left-0 w-full fs28 companyList" v-if="state.dropShow"> <view class="border-b border-solid border-gray-100 px-3 py-2 companyList" v-for="(item,index) in state.companyList" :key="index" @click="selectCompanyName(item)" >{{ item }} </view> </view> |
对弹出层的DOM元素添加companyList class名称，保证该名称只属于该弹出层拥有，页面上其他元素都不包含该className
添加监听事件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const closeCompanyNameTips = (e)=>{ if(e.target.className.indexOf("companyList")<0){ // 当前点击的对象不包含companyList class名称时代表点击的是非弹出层，可以在此 // 实现弹出层的关闭 } } onMounted(() => { document.addEventListener("click",closeCompanyNameTips) }) onBeforeUnmount(()=>{ document.removeEventListener("click",closeCompanyNameTips) }) |
About The Author
