vue 点击dom外部触发函数的自定义指令场景：自定义模态框或者很多弹出控件需要点击外部时消失等很有用功能：点击dom外

场景：自定义模态框或者很多弹出控件需要点击外部时消失等很有用

功能：点击dom外部区域触发一个函数

代码:

export default {
  bind (el, binding, vnode) {
    function documentHandler (e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        binding.value(e);
      }
    }
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update () {

  },
  unbind (el, binding) {
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  }
};

全局注册

Vue.directive('click-outside', clickOutSide);

使用

<DatePickerv-click-outside="onClickOutside"></DatePicker>

onClickOutside () {  this.open = false;},

对你有帮助的话点个赞哦