下拉菜单点击其他位置隐藏问题 总结

第一种解决方案:
main.js 中写入以下代码:

// 添加点击空白处的指令
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  }
})

home.vue的下拉标签中添加如下代码

  <div @click="selectName" v-click-outside="clickOutSide">

methods 方法中写入

clickOutSide() {
      this.showName = false;   // 设置下拉选项隐藏方法
    },

第二种方式 创建一个js文件 clickoutside.js

const clickoutsideContext = '@@clickoutsideContext'

export default {
  bind(el, binding, vnode) {
    const documentHandler = e => {
      if (vnode.context && !el.contains(e.target)) {
        vnode.context[el[clickoutsideContext].methodName]()
      }
    }
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      arg: binding.arg || 'click'
    }
    document.addEventListener(el[clickoutsideContext].arg, documentHandler)
  },

  update(el, binding) {
    el[clickoutsideContext].methodName = binding.expression
  },

  unbind(el) {
    document.removeEventListener(el[clickoutsideContext].arg, el[clickoutsideContext].documentHandler)
  },

  install(Vue) {
    Vue.directive('clickoutside', {
      bind: this.bind,
      unbind: this.unbind
    })
  }
}

然后使用
在.vue 文件中

1. 引入
import Clickoutside from '@/utils/clickoutside';
2. 引入自定义指令
directives: {
Clickoutside,
},
3.在元素上使用
<div class="tel" v-clickoutside="clickOutside">
</div>
methods: {
clickOutside() {
　　console.log('点击这个元素之外的元素之执行此方法')
  
}}