Vue框架为我们提供了便捷的开发方式，能够快速实现各种功能。在项目中，经常会遇到需要点击其他地方来隐藏DIV的情况。本文将从多个方面分析Vue如何实现点击其他地方隐藏DIV的功能。
一、Vue点击其他地方隐藏
一个常见的需求是，在页面上点击除了某个元素以外的区域，隐藏这个元素。
下面是Vue实现点击其他地方隐藏一个指定元素的方法：
<template>
<div class="container" ref="box">
<button @click="toggle">显示/隐藏</button>
<div class="box" v-if="isShow">
我是要隐藏的元素
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
close(target) {
if (!this.$refs.box.contains(target)) {
this.isShow = false;
}
}
},
mounted() {
document.addEventListener("click", this.close);
},
beforeDestroy() {
document.removeEventListener("click", this.close);
}
};
</script>
这段代码中，我们在容器上利用ref属性指定了一个名字，然后在关闭方法close中使用了contains方法，判断当前点击的元素是否在容器内，如果不在，那就隐藏这个元素。
二、Vue点击其他地方隐藏组件
在Vue中，我们也可以利用组件来实现点击其他地方隐藏的功能。同样的，我们给出了一个示例代码：
<template>
<div class="container">
<button @click="toggle">显示/隐藏</button>
<MyBox v-if="isShow" @close="close" />
</div>
</template>
<template name="MyBox">
<div class="box">
我是要隐藏的元素
</div>
</template>
<script>
const MyBox = {
name: "MyBox",
template: "#MyBox",
methods: {
close(target) {
if (!this.$el.contains(target)) {
this.$emit("close");
}
}
}
};
export default {
components: { MyBox },
data() {
return {
isShow: false
};
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
close() {
this.isShow = false;
}
}
};
</script>
这里，我们用了一个MyBox组件来实现需要隐藏的元素，给它的模板取了一个名字，然后定义了一个close方法，当点击的元素不在此组件内时，触发emit，通知父组件关闭元素。在父组件中，我们通过在模板中引入MyBox组件，并传入close方法，实现了点击按钮显示/隐藏MyBox组件。
三、Vue点击其他地方隐藏弹窗
弹窗是Web开发中常用的元素，常常需要点击其他地方来关闭它。下面的代码演示了如何实现在Vue应用中点击其他地方隐藏弹窗。
<template>
<div class="container">
<button @click="toggle">打开弹窗</button>
<div class="mask" v-if="isShow">
<div class="modal">
<div class="close" @click="hide">X</div>
弹出内容
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
},
methods: {
toggle() {
this.isShow = true;
},
hide(target) {
if (this.$el.contains(target)) return;
this.isShow = false;
}
},
mounted() {
document.addEventListener("click", this.hide);
},
beforeDestroy() {
document.removeEventListener("click", this.hide);
}
};
</script>
这段代码中，我们在模板中设置了一个遮罩层，给它的样式设置了透明度，然后在点击按钮后，显示遮罩层和弹出层。在关闭方法中，我们用了一个contains方法，如果被点击的元素包含在当前组件内，就不关闭弹窗。
四、Vue点击其他位置隐藏元素
除了点击某个元素以外的区域来隐藏元素，还有一种情况是需要点击其他位置来隐藏元素。比如下面的代码：
<template>
<div class="container">
<div class="box" :class="{ active: isShow }">
我是要隐藏的元素
</div>
<button @click="toggle">切换显示/隐藏</button>
<div class="other">
这是其他地方
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
};
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
handleClick(target) {
if (!this.$el.contains(target)) {
this.isShow = false;
}
}
},
mounted() {
document.addEventListener("click", this.handleClick);
},
beforeDestroy() {
document.removeEventListener("click", this.handleClick);
}
};
</script>
这里，我们定义了一个box元素，它有一个active类，用来控制它的显示与隐藏。当点击切换按钮时，会改变isShow的状态，使box元素显示/隐藏。我们还在模板中添加了一个其他部分，点击这个部分就可以隐藏box元素。
五、Vue实现点击显示和隐藏
Vue提供了一个简便的指令v-show，可以让我们轻松实现点击显示和隐藏。下面是代码示例：
<template>
<div class="container">
<button @click="isShow = !isShow">切换显示/隐藏</button>
<div class="box" v-show="isShow">
我是要隐藏的元素
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
};
}
};
</script>
这个代码非常简单，我们在box元素上使用了v-show指令，根据isShow的值来控制元素的显示和隐藏。当点击切换按钮时，会改变isShow的状态，从而达到了点击显示和隐藏的目的。
六、Vue点击按钮显示隐藏
除了点击其他地方隐藏元素，还可以使用按钮来控制元素的显示和隐藏。下面是代码示例：
<template>
<div class="container">
<button @click="isShow = !isShow">切换显示/隐藏</button>
<div class="box" :class="{ active: isShow }">
我是要隐藏的元素
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
}
};
</script>
这段代码与上面的示例类似，我们在box元素上添加了一个active类，用来控制元素的显示和隐藏。当点击按钮时，会改变isShow的状态，从而达到显示和隐藏元素的效果。
七、Vue点击切换显示隐藏
有时候，我们需要点击一个元素时，显示另一个元素，再点击它时，隐藏另一个元素。下面的代码实现了这个效果：
<template>
<div class="container">
<div class="box1" :class="{ active: isShow }" @click="toggle">
我是一个元素
</div>
<div class="box2" v-show="!isShow">
我是另一个元素
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
};
},
methods: {
toggle() {
this.isShow = !this.isShow;
}
}
};
</script>
这段代码中，我们定义了两个box元素，分别是box1和box2，通过绑定class和v-show来实现它们之间的相互切换。当点击box1元素时，切换isShow的状态，从而隐藏box1并显示box2；再次点击box2，切换isShow状态，达到切换显示和隐藏的效果。
总结
以上就是七种Vue实现点击其他地方隐藏DIV的方法，我们从各个方面分析了如何实现这个功能，希望对您有所帮助！
