vue 自定义指令 实现点击下拉菜单外部区域关闭下拉菜单

我们来看下常见的下拉菜单：

这里我们点击菜单，下拉菜单就会显示，点击下拉菜单以外的区域就会隐藏。

这是一个简单的例子：

这里增加一个选项，就是当我们按下esc键的时候，下拉菜单也可以关闭。
先贴出代码：

我们先来看下el,binding,vnode分别是什么：

其中这里的主要逻辑是：如果点击区域是在元素内部，那么返回。如果绑定了expression，在这里我们需要的是一个函数，那么就执行用户自定义的函数方法。

注意这里的expression可能值有很多，如果你不注意写了其他的那么程序可能不会达到你的预期。

 binding.value(e)

这个大家在看上面的具体内容时都知道了 binding.value是一个函数，用来执行用户绑定的expression，也就是函数。

el.__vueClickOutSize__
 el.__vueKeyup_

这两个是我们自己声明的变量，因为在vue2.x中不能使用this.xxxx的形式在上下文中声明一个变量，它们的作用是在unbind函数中也就是组件或元素销毁的时候移除事件监听，不然，这些事件监听会一直存在在内存中。