div失焦方法

实现点击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'">1234div>
template>

<script setup>
import { ref } from "vue";
function divBlur(){
  console.log("点击div之外了");
};
</script>

注意:: 这种方法,在div打开后必须要在div中有点击操作,再点击div外才能触发 @blur事件
div样式中还需加 outline:0;样式,取消聚焦时的边框