Vue中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容

代码：

<template>
  <div @click="showBox = false" class="box">
      <button @click.stop="showBox=true">点击显示内容</button>
      <div class="box1" v-show="showBox">我是显示的内容</div>
      <div class="box2">我是其他内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBox: false,
    };
  },
};
</script>
<style lang="less">
.box{
    width:100vw;
    height: 100vh;
}
.box1{
    width: 200px;
    height: 200px;
    background-color: pink;
}
.box2{
    width:200px;
    height: 200px;
    background-color: powderblue;
}
</style>