Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
时间: 2024-03-21 16:38:48 浏览: 16
实现思路:
1. 给需要隐藏的元素绑定一个@click事件,阻止事件冒泡。
2. 在全局绑定一个@click事件,当点击到元素以外的区域时触发。
3. 在全局@click事件的回调函数中判断当前点击的区域是否是需要隐藏的元素以内,如果是,则不做任何操作;如果不是,则隐藏需要隐藏的元素。
代码实现:
```
<template>
<div class="container">
<div class="box" v-show="show" @click.stop>
<p>需要隐藏的元素</p>
</div>
<button @click="toggleShow">显示/隐藏元素</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
methods: {
toggleShow() {
this.show = !this.show;
},
hideElement(e) {
if (!this.$refs.box.contains(e.target)) {
this.show = false;
}
},
},
mounted() {
document.addEventListener("click", this.hideElement);
},
beforeDestroy() {
document.removeEventListener("click", this.hideElement);
},
};
</script>
```
这里的实现思路是,给需要隐藏的元素绑定一个@click.stop事件,阻止事件冒泡,然后在全局绑定一个@click事件,当点击到元素以外的区域时触发,然后在全局@click事件的回调函数中判断当前点击的区域是否是需要隐藏的元素以内,如果是,则不做任何操作;如果不是,则隐藏需要隐藏的元素。