<template>
<div>
<div @click="showDiv">点击此处显示/隐藏</div>
<div v-if="isDivVisible" ref="divToHide">要隐藏的内容</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
data() {
return {
isDivVisible: false
};
},
methods: {
showDiv() {
this.isDivVisible = !this.isDivVisible;
},
handleClickOutside(event: MouseEvent) {
const divToHide = this.$refs.divToHide as HTMLElement;
if (divToHide && !divToHide.contains(event.target as Node)) {
this.isDivVisible = false;
}
}
},
mounted() {
onMounted(() => {
document.addEventListener('click', this.handleClickOutside);
});
},
beforeUnmount() {
document.removeEventListener('click', this.handleClickOutside);
}
});
</script>
使用 @click 来监听 div 的点击事件，并通过 v-if 来控制 div 的显示与隐藏。在组件的 mounted 钩子函数中，通过 document.addEventListener 添加了一个点击事件监听器，用于监听整个页面的点击事件。当点击事件发生时，会调用 handleClickOutside 方法来检查是否需要隐藏 div。最后，在组件的 beforeUnmount 钩子函数中，通过 document.removeEventListener 来移除点击事件监听器，以防止内存泄漏。文章来源地址https://www.toymoban.com/news/detail-640696.html
文章来源：https://www.toymoban.com/news/detail-640696.html
到了这里，关于vue3项目中，点击某个div以外的区域，将这个div隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
