vue中实现 点击自身元素之外其他元素时，关闭自身元素

在点击不想关闭的元素的上加@click.stop事件， 阻止事件冒泡

html

<div class="user" v-show="popup" @click="close()">
      <div class="user-more" @click.stop="closestop()">...</div>
</div>

给外层一个弹出框，宽高百分百，覆盖整个屏幕，点击外层遮罩层的时候，触发close函数，关闭弹窗

css

/* 外层遮罩层 */
.user{
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(2, 2, 2, 0);
  z-index: 9999;
}
/* 用户弹出框 */
.user-more{
  width: 55vw;
  height: 100vw;
  border-radius: 1vw;
  border: 1px solid #eee;
  background: #fff;
  position: absolute;
  top: .5vw;
  right: 1vw;
  z-index: 10000;
}

js

data(){
    return{
      popup:true,//用到的变量
    }
  },

methods:{
      //更改popup值
      //点击外层关闭显示框
      close(){
          this.popup=false;
      },
      //点击自身显示框仍显示
      closestop(){
         this.popup=true;
      },
     
},