vue监听点击自己和点击其他元素；el-popover通过visible控制显隐；点击其他隐藏el-popover

场景： 一般点击元素自己，显示弹框；点击页面其他元素都是关闭

特别是处理el-popover通过visible控制显隐的时候。点击其他隐藏el-popover <el-popover :visible

javascript 复制代码

<template>
  <div>
    <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px">父元素
      <div class="button" @click.stop="handleDivClick">
        点击我本身
        <div style="background: cyan; " @click.stop="()=>{console.log('子元素可以是空事件')}">子元素</div>
      </div>
    </div>
    <div class="content">这是页面的其他内容</div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

const handleDivClick = () => {
  console.log('点击本身'); // 点击特定 div 时打印
};

const handleClickOutside = () => {
  console.log('点击其他元素'); // 点击其他元素时打印
};

// 在组件挂载时添加全局点击事件监听器
onMounted(() => {
  window.addEventListener('click', handleClickOutside);
});

// 在组件卸载时移除全局点击事件监听器
onBeforeUnmount(() => {
  window.removeEventListener('click', handleClickOutside);
});
</script>

<style>
.button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
}

.content {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>