dom显隐（点击指定dom外位置，隐藏dom）

html

<span @click='CompilationChange'>显示隐藏dom</span>


//主要内容 v-show="zhxx_flag" id='zjssID'
<div v-show="zhxx_flag" id='zjssID'>
        <div>显隐内容</div>
</div>

js

//控制dom显隐

//显隐标识zhxx_flag 
const zhxx_flag = ref(false);

function checkClickOutside($event) {
    //获取dom
  let dom=document.querySelector('#zjssID')
//dom.contains($event.target)判断点击位置是否在dom内

  console.log("------event--",dom.contains($event.target))

  // 不在dom内，将dom隐藏，并删除事件监听
    if (!dom.contains($event.target)) {
      zhxx_flag.value = false;
      document.removeEventListener("click", checkClickOutside);
    }
}


//初始的控制dom显示，并创建出点击监听事件

const CompilationChange = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  zhxx_flag.value = true;
  if (zhxx_flag.value) {
    document.addEventListener("click", checkClickOutside);
  } else {
    document.removeEventListener("click", checkClickOutside);
  }
};