vue点击其他地方 这个div隐藏
Vue 中实现点击其他地方隐藏 `div` 的思路一般如下所示:
1. 给需要隐藏的 `div` 绑定一个 `v-show` 或 `v-if` 指令,初始状态为显示。
2. 给整个页面或父级元素(比如 `body` 或者 `app` 组件,建议是根组件)绑定一个点击事件。
3. 在点击事件的回调函数中,判断点击的区域是否是需要隐藏的 `div` 或者 `div` 的子元素。如果是,则不进行操作,否则将 `div` 隐藏。
4. 将点击事件绑定到整个页面或父级元素上。
下面是一个使用 Vue 实现点击其他地方隐藏 `div` 的示例代码:
```vue
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<div v-show="isShow" ref="box">需要隐藏的 div</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
};
},
mounted() {
document.addEventListener('click', this.hideBox);
},
methods: {
hideBox(e) {
// 判断是否点击需隐藏的 div 及其内部元素
if (!this.$refs.box.contains(e.target)) {
this.isShow = false;
}
},
},
beforeDestroy() {
document.removeEventListener('click', this.hideBox);
},
};
</script>
```
其中,上面的代码使用了 `mounted()` 和 `beforeDestroy()` 生命周期来添加和移除点击事件监听器,也可以在 `created()` 和 `destroyed()` 生命周期中添加和移除。需要注意的是,在添加和移除事件监听器时要避免重复添加和移除,可以使用 `addEventListener()` 和 `removeEventListener()` 方法来实现。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律