1. vue3中建立div结构如下:
<div ref="codeDom">
<ul v-show="isShow">
<li>测试</li>
</ul>
</div>
2. 在ts中写入处理方法如下:
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
export default defineComponent({
setup() {
const codeDom= ref()
const isShow = ref(true)
const closeSelect = (e: Event) => {
if (codeDom.value && !codeDom.value.contains(e.target)) {
isShow.value = false
}
}
onMounted(() => {
document.addEventListener('click', closeSelect)
})
onUnmounted(() => {
document.removeEventListener('click', closeSelect)
})
return {
codeDom,
isShow
}
}
})