遇到的问题是需要在点击弹窗区域外，关闭组件；但是如果监听body的点击事件，关闭组件，会导致点击组件内的区域也会关闭
<template>
<el-icon class="icon target-icon" :size="20" color="#dedede" @click="accurateShow = !accurateShow"><Edit /></el-icon>
<!-- 弹框dom -->
<div v-if="accurateShow" class="doctor-range-accurate">...</div>
</template>
<script setup>
import { reactive, getCurrentInstance, toRefs, onMounted } from 'vue'
const accurateShow = ref(false)
onMounted(() => {
window.addEventListener('click', event => {
const model = document.querySelector('.doctor-range-accurate-card') //弹框dom
if (!model) return //如果弹框还没出来return
let targetIcon = document.querySelector('.target-icon') //触发弹框显示按钮
if (targetIcon.contains(event.target)) return //如果点击的是触发按钮return 触发按钮本身有控制显隐的方法
if (!model.contains(event.target)) {
accurateShow.value = false
}
})
})
</script>
也可以监听body的点击事件，然后当点击dialog组件和触发按钮的时候取消冒泡...
