vue自定义指令clickoutside

npm install vue-click-outside
方法一：

<span v-clickoutside="handleClose">内容</span>
<span @click.stop="isShow">点击出现的内容</span>
<script>
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__;
  },
};
export default {
	directives: { clickoutside },
	methods: {
		isShow() {
			this.show = !this.show;
		},
		handleClose(){
			this.show = false;
		}
	}
}
</script>

方法二：

<span v-click-outside="handleClose">其余内容</span>
<span @click.stop="isShow">点击出现的内容</span>
import { clickOutside } from 'common/js/event';
export default {
	directives: {clickOutside},
	methods: {
		isShow() {
			this.show = !this.show;
		},
		handleClose() {
			this.show = false;
		}
	}
}

event.js

export const clickOutside = {
  bind: function(el, binding, vNode) {
    el.__vueClickOutside__ = event => {
      if (!el.contains(event.target)) {
        // call method provided in v-click-outside value
        vNode.context[binding.expression](event);
        event.stopPropagation();
      }
    };
    document.body.addEventListener('click', el.__vueClickOutside__);
  },
  unbind: function(el, binding, vNode) {
    // Remove Event Listeners
    document.removeEventListener('click', el.__vueClickOutside__);
    el.__vueClickOutside__ = null;
  },
};