vue点击当前盒子以外任意地方隐藏当前盒子

方法一： contains方法 用于判断DOM元素的包含关系

需要注意的是：它以HTMLElement为参数，且返回布尔值

<template>
    <button @click.stop='showBox'>点击展示隐藏盒子</button>
    <div ref='box' v-show="flag">要隐藏的盒子</div>
</template>
<script>
    export default {
        data(){
           return{
              flag:false
           }
        },
        mounted() {
            document.addEventListener('click', this.hideBox);
        },
        methods:{
            hideBox(e){
                //判断是否点击的是盒子之外
               if (!this.$refs.box.contains(e.target)) {
                   this.flag = false
               }
            },
            showBox(){
                this.flag = !this.flag
            },
        }
    }
</script>

方法二： 可以给盒子加上阻止冒泡

<template>
  <div class="container" @click="hideBox">
    <div class="box" @click.stop.prevent>
      点击我，我不会隐藏
    </div>
  </div>
</template>

当在 .box 以外的地方点击时，由于 .stop 修饰符的作用，事件不会冒泡到 .container，因此不会触发 hideBox 方法