Vue 自定义指令实现点击元素外触发事件

前言 最近搞了毕设，须要实现一个场景，点击一块区域，弹出一个编辑区域，点击页面的其余地方的时候，这个编辑区域就隐藏，本想一想以前写模态框同样写个方法的时候，忽然

以为能够尝试用 vue 相关的东西优雅的解决这个事情，而后就学了下面的自定义指令了。

前置知识

既然要用 Vue 的自定义指令，那么确定要了解一下 Vue 自定义指令的相关知识啦，关于这部分的内容，看我以前写过的《Vue 自定义指令》或者直接看官方文档就能够啦，这里我就再也不多讲了。

解决思路

这个按照我以前写模态框的经验，个人作法是给 document 绑定一个点击事件，而后判断触发点击事件的那个元素是否是模态框所在的目标区域，若是不是，那么就触发隐藏事件。看一下代码吧

$(document).mouseup(function(e){
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target)){ // 判断是否是目标区域
    some code...   // 功能代码
  }
});

实现

有了思路，实现起来就简单了。就直接放定义的代码啦

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);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};


directives: {clickOutside},

接下来就能够就能够在组件内直接使用啦

<div v-click-outside="closeDialog"></div>

我实现的效果

而后关于这个点击元素外触发某个事件，若是还有啥其余优雅的方式的话，下面留言分享一下哈。