支持ignore的`v-clickoutside`指令

clickoutside: {
  bind(el, binding, vnode) {
    function handleClickOutside(e) {
      console.log('e.target', e.target);
      if (e.target === el || el.contains(e.target) ||  e.target.closest('.ignore')) {
		return
	  }
      binding.value(e)
    }
    el.__vueClickOutside__ = handleClickOutside 
    document.addEventListener('click', handleClickOutside)
  },
  unbind(el) {
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

使用方式

<div class="outer">
  <div class="ignore"></div>
  <div class="inner" v-clickoutside="doSome"></div>
<div>

当我们点击.inner之外的div时,将会触发v-clickoutside绑定的doSome事件,
但是inner上方有一个带着.ignore的div当点击这个div时,不会触发doSome事件

posted @ 2023-06-01 08:37  INEEDSSD  阅读(17)  评论(0编辑  收藏  举报