vue2点击div以外的地方隐藏
时间: 2023-07-18 07:29:51 浏览: 52
在 Vue2 中,可以通过监听全局点击事件,判断点击的元素是否在需要隐藏的范围内来实现点击 div 以外的地方隐藏。具体实现可以参考以下代码:
```html
<template>
<div class="container" ref="container">
<div class="box" v-show="showBox">这是需要隐藏的元素</div>
<div class="button" @click="showBox = !showBox">点击这里显示/隐藏元素</div>
</div>
</template>
<script>
export default {
data() {
return {
showBox: false,
};
},
mounted() {
document.addEventListener("click", this.hideBox);
},
beforeDestroy() {
document.removeEventListener("click", this.hideBox);
},
methods: {
hideBox(event) {
if (!this.$refs.container.contains(event.target)) {
this.showBox = false;
}
},
},
};
</script>
```
在上述代码中,我们通过 `v-show` 控制需要隐藏的元素的显示与隐藏;通过监听 `mounted` 和 `beforeDestroy` 钩子函数,在组件挂载和销毁时分别添加和移除全局点击事件的监听;在 `hideBox` 方法中判断点击的元素是否在 `container` 容器内,如果不在则隐藏需要隐藏的元素。
阅读全文