vue实现自定义指令 点击元素区域外执行事件

效果演示:

需求：出现搜索窗口后，点击搜索窗口外关闭搜索窗口

vueClickOutSize.js:

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

使用：

import clickOutside from "@/directives/vueClickOutSize";
export default {
  data() {
    return {
      flag: false
    };
  },
  components: {
    SmallArticleItem
  },
  directives: { clickOutside },
  props: ["placeholder"],
  methods: {
    closeSearchBar() {  
      if (this.flag === false) {  //可能在第一次点击时也会触发。这里做个判断
        this.flag = true;
      } else {
        this.$emit("onClose");
      }
    },
  },
};

实例见: https://github.com/pppercyWang/twitter-blog-vue