vue自定义指令（v-clickoutside）-点击当前区域之外的位置

一、效果

二、封装指令

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

三、使用

<div class="box" v-clickoutside="clickoutside"></div>

    clickoutside(...rest) {
      console.log('点击自身以外的位置', ...rest)
    }

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~