vue下拉框如何点击其他区域收起

Question

一个下拉组件，如图，想要点击除这个组件的任何其他区域收起这个菜单，vue该怎么做？

Answer 1

ready() {
   document.addEventListener('click', (e) => {
       if (!this.$el.contains(e.target)) this.show = false
   })
}

Answer 2

这个下拉框是个div或其他什么吧，应该有个用于展示的class吧，这个class应当对应data里面的一个数据吧，修改对应的这个数据不就行了。

Answer 3

1.弹出框v-if="isShow"判断
2.单击时@click="doClick()"
事件:默认(初始化)isShow为false,单击时isShow=!isShow

Answer 4

vue 可以直接绑定blur事件 当当前对象失去焦点时 触发自定义动作

Answer 5

用vue的组件 vue-clickaway git社区就有

Answer 6

介绍:
obj为点击的下拉对象,对象里的childrenVisibility控制是否下拉
toggleDropDown(obj) {
      // 切换下拉框状态
      obj.childrenVisibility = !obj.childrenVisibility
      // 如果已经下拉,注册全局点击收起事件
      if (obj.childrenVisibility) {
        // 生成随机的函数名,防止当有多个下拉框下拉时,第二个下拉框会给document注册同名函数,使得函数内部的obj变成模糊
        let funcName = this.lodash.uniqueId('funcName_')
        funcName = (e) => {
          // 判断如果点击的不是下拉按钮时,就由事件收起下拉框,否则由下拉按钮收起,需要在下拉按钮中设置唯一标识"data-selfId",绑定下拉对象的id
          if (!(e.target.getAttribute('data-selfId') == obj.id)) {
            obj.childrenVisibility = false
          }
        }
        // 注册监听事件,其中最后一个对象内的配置是必须的
        document.addEventListener('click', funcName, {
          once: true, // 控制监听事件只触发一次就自动删除
          capture: true //, capture控制事件在捕获期间触发,因为根据浏览器捕获\冒泡的规则————先捕获,后冒泡，如果使它在冒泡阶段触发的话，点击打开下拉框后会马上注册事件，然后冒泡到document上,在第一轮就直接触发了，看上就跟打不开似的。
        })
      }
    },

浏览器捕获冒泡与addeventlistener具体链接:
https://developer.mozilla.org...
https://zh.javascript.info/bu...