自己用vue 写了个select子组件 怎么判断点击了该组件以外的地方然后进行隐藏下拉框？

Question

  <div class="val" @click="show=!show">
      <span class="badge mr5" v-for="(k,index) in choose" :key="index">{{k.key}}</span>
      <ul v-show="show">
        <li class="point" @click.stop="check(index)" v-for="(i,index) in list_con" :key="index">
          <i class="iconfont" :class="i.checked?'icon-checked':'icon-check'"></i>
          {{i.key}}
        </li>
      </ul>
    </div>

最上面的框是一个div 点击 显示下面的列表 列表就是 ul+li

怎么样才能判断鼠标点击的地方是非该组件的地方？

Answer 1

有个简单的方式就是,给class为val的元素添加tabIndex属性，使其拥有表单元素的功能，然后添加blur事件在blur事件中修改show的值为false即可。

Answer 2

你的子组件可以有个postion:fixed的透明的100%的遮罩，点击隐藏

Answer 3

添加全局监听，但是你的select组件的点击事件要用@click.stop，阻止事件冒泡

 mounted() {
    document.addEventListener("click", this.handleBodyClick);
 }
 methods: {
    handleBodyClick() {
      this.show = false;
    }
 },