如何实现，以便在单击空白区域时关闭块答案

【问题标题】：How to implement so that when you click on an empty space, close the block如何实现，以便在单击空白区域时关闭块
【发布时间】：2021-04-29 08:34:51
【问题描述】：

我有一个常规块，我想这样做，当您单击空白区域时，此块关闭此处是指向 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>

【问题讨论】：

您好，您的意思是当您点击空白区域时该框应该消失吗？
嗨，是的，你理解正确，当然，除了这个块:)

标签： javascript vue.js events vuejs2

【解决方案1】：

使用事件总线在窗口点击事件监听器和组件之间进行通信应该是一种方法。

您可以在此基础上工作codesandbox

【讨论】：

【解决方案2】：

你可以做这样的事情。使用背景并检测它何时被点击。这是你想要的吗？

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>

【讨论】：