html

<div v-clickoutside="handleClose"></div>
//当点击此div外的任何元素 将会触发 v-clickoutside="handleClose"的 handleClose

构造点击函数

const clickoutside = {
  // 初始化指令
  bind (el, binding, vnode) {
    function documentHandler (e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update () { },
  unbind (el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

在vue里注册构造的函数

export default {
  
  directives: { clickoutside },
  
  methods:{
   handleClose () { // 点击除了页面其他地方关闭车型选择
      this.carBrandOff = false
    }
  }
}

ojbk!