点击元素自身以外的dom

// 点击元素自身意外的dom
const clickoutside = Vue.directive('clickoutside', {
  bind (el, binding, vnode, oldVnode) {
    function documentHandler (e) {
      // 如果是元素本体则返回
      if (el.contains(e.target)) return false
      if (binding.expression) {
        // 有绑定函数，则执行 binding.value指的是绑定的值
        binding.value(e)
      }
    }
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  inserted (el) {},
  update (el, binding, vnode, oldVnode) {},
  // 解除绑定
  unbind (el, binding, vnode, oldVnode) {
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
})
 
使用： 在元素上加上v-clickoutside，也可v-clickoutside='getTest'<br>链接：： https://www.cnblogs.com/yan-975-yy/p/15629466.html

　以下为防止重复点击自定义指令：

// 防止多次点击
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
})
使用：v-preventReClick 