大佬教程收集整理的这篇文章主要介绍了如何实现，以便当您单击空白区域时，关闭该块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个常规块，我想这样做，当您单击空白区域时，此块将在此处关闭，这是一个指向 codesandbox 的链接
<template>
<div>
<div class="wrapper"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",props: {
msg: String,},};
</script>
<style scoped>
.wrapper {
wIDth: 300px;
height: 150px;
BACkground: green;
margin: auto;
}
</style>
使用事件总线在窗口单击事件侦听器和组件之间进行通信应该是一种方法。
您可以在此基础上工作codesandbox
,你可以做这样的事情。使用背景并检测它何时被点击。这是你想要的吗？
App.vue
<template>
<div id="app" class="BACkdrop" @click.self="showBox = !showBox">
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<HelloWorld :showBox="showBox" msg="Hello Vue in CodeSandbox!" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",components: {
HelloWorld,},data: function () {
return {
showBox: true,};
},};
</script>
<style>
#app {
text-align: center;
margin-top: 40px;
}
.BACkdrop {
z-index: 0;
position: fixed;
width: 100%;
height: 100%;
}
</style>
HelloWorld.vue
<template>
<div>
<div v-if="showBox" class="wrapper"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",props: {
msg: String,showBox: Boolean,};
</script>
<style scoped>
.wrapper {
width: 300px;
height: 150px;
BACkground: green;
margin: auto;
}
</style>
以上是大佬教程为你收集整理的如何实现，以便当您单击空白区域时，关闭该块全部内容，希望文章能够帮你解决如何实现，以便当您单击空白区域时，关闭该块所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。