自定义一个vue指令，指令为元素添加上之后，点击元素外部隐藏掉该元素

今天面试有遇到面试官问的一个问题，就是在vue中自定义一个指令，指令在为元素添加上之后，点击元素之外的区域，可以将元素隐藏起来。当时没有回答出来，回来后仔细一看，发现其实还是挺简单的，现在我就将整个教程分享给大家。

1.在main.js定义一个全局的自定义指令

原理：

1.在指令中，给整个document文档设置一个点击事件，然后就使用到事件对象。这里告诉大家一个只是点，就是event.target是触发当前时间的源头，event.current是当前正在执行事件的元素。

2.这里实现逻辑就非常的简单，只要判断当前触发事件的源头是否是使用标签的元素就好了，只要不是，就给元素设置隐藏。

Vue.directive("leavehide", {
  bind(el, bindings, vnode) {
    document.onclick = function (event) {
      if (el !== event.target) {//判断当前触发事件的源头，是否是当前指令所在的元素
        el.style.display = "none"//只要是就给它设置display:none让它隐藏
      }
    }

  }
})

2.使用

由于它是全局自定义的指令，所以，可以在组件中任意使用。

 实现效果：

在是给元素使用上这个自定义指令之后，只要点击元素的外部，就可以实现对元素的隐藏。