第一种:
实现点击div元素之外 隐藏div 需求
需要使用元素失焦方法,但是div没有失去焦点的方法
给div元素添加tabIndex属性:tabIndex可以设置键盘中TAB键在控件中的移动顺序,也就是焦点的顺序,控件的tabIndex设成1到32767的一个值,可以把这个控件加入到TAB序列中
tabIndex的默认值为 0,把tabIndex的值设置为 -1 那么这个控件则在TAB的序列之外了,
但是 tabIndex=‘-1’ 时 , onfocus与onblur事件仍然被启动
hidefocus=“true” 隐藏 聚焦 的边框
<template>
<div hidefocus="true" tabIndex="-1" @blur="divBlur" v-show="activeId === '1'">1234</div>
</template>
<script setup>
import { ref } from "vue";
function divBlur(){
console.log("点击div之外了");
};
</script>
注意:: 这种方法,在div打开后必须要在div中有点击操作,再点击div外才能触发 @blur事件
div样式中还需加 outline:0;样式,取消聚焦时的边框
第二种:
<div class="needHide-Container" v-if="activeTollId === '1'">1234</div>
先给元素赋值一个class类名,这个类名用来区别 当前点击的元素是否为 要隐藏的元素
<script setup>
import { ref,watch} from "vue";
let activeTollId = ref("")
//监听
watch(
//监听控制div显示隐藏的变量activeTollId.value
() => activeTollId.value,
//如果得到的新数值不为空,说明div元素显示了,给整个页面上添加mousedown鼠标点击事件调用onbourfun
//否则得到的新数值为空说明div元素隐藏了,那就移除调mousedown点击事件
(val) => val ? document.addEventListener('mousedown', onbourfun) : document.removeEventListener('mousedown', onbourfun)
)
//定义隐藏方法,用来区别点击的是否为 要隐藏的 div元素,如果点击的不是带有needHide-Container类名的元素则惦记的为div外的元素 这时我们要隐藏div所以给activeTollId.value赋值为''
const onbourfun = (e) => {
if (!e.path.includes(document.querySelector('.needHide-Container'))) activeTollId.value = ''
}
</script>
