vue3点击其他元素隐藏固定DIV

显示的内容

 <div v-if="hSearch" ref="iscity">
    <div><input class="h-9 w-full" placeholder="内容搜索..." /></div>  
  </div>

元素函数

export const hSearch = ref(false) //是否显示搜素框
export const hSearchValue = ref('') //搜素事件是否存在

const proxy: any = getCurrentInstance()
const cliFun = (e: any) => {
  if (!proxy.ctx.$refs.iscity.contains(e.target) && e.target.id !== 'iscity') {
    if (hSearchValue.value.contains(e.target)) return //如果存在元素不隐藏
    hSearch.value = false //隐藏
  }
}
onMounted(() => {
  document.addEventListener('click', cliFun) //点击事件
})
onUnmounted(() => {
  document.removeEventListener('click', cliFun) //删除事件
})

父元素内容

<input ref="ipu" type="text" @focus="test" />

const proxy: any = getCurrentInstance()
function test() {
  hSearchValue.value = proxy.ctx.$refs.ipu //如果存在不隐藏
  hSearch.value = true  //显示元素内容
}