媒介 近来搞了毕设，须要完成一个场景，点击一块地区，弹出一个编辑地区，点击页面的其他地方的时刻，这个编辑地区就隐蔽，本想一想之前写模态框一样写个要领的时刻，倏忽

以为能够尝试用 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>

我完成的结果

然后关于这个点击元素外触发某个事宜，假如另有啥其他文雅的体式格局的话，下面留言分享一下哈。