vue实现点击其他地方隐藏div

个人的给的只是思路,样式简单的写了下

<div class="test" > 
    <div v-if="showDiv"  @click="piClick"  style="width: 98%;height:100%;margin: 10px auto;background-color: rgba(158, 158, 158, 0.2);" >
      <div style="width:500px;height:60px; "></div>
      <div  @click.stop  style="width:500px;height:500px; margin:0 auto;background-color: rgb(255, 255, 255); ">
          1111
          <el-button @click="close">关闭</el-button>
      </div>
  </div>
  <div  class="button" @click="piClick"  v-if="!showDiv" >
      pop
  </div>
</div>

//js


export default {
  data() {
    return {
       showDiv:false 
    };
  },
  methods: {
      piClick(){
        this.showDiv = !this.showDiv;  
      },
      close(){
          alert('关闭')
          this.showDiv = !this.showDiv; 
      }

  },
  mounted(){
  },
  created() {
      

  }
};

//css

.test{
    .button{
        width: 80px;
        height: 50px;
        margin-left: 15px;
        line-height: 50px;
        text-align: center;
        background-color: aliceblue;
        border: 1px solid rgb(50, 49, 49);
    }
}