clickoutside是Element-ui实现的一个自定义指令，顾名思义，该指令用来处理目标节点之外的点击事件，常用来处理下拉菜单等展开内容的关闭，在Element-ui的Select选择器、Dropdown下拉菜单、Popover 弹出框等组件中都用到了该指令，所以这个指令在实现一些自定义组件的时候非常有用。
要分析该源码，首先要了解一下Vue的自定义指令。自定义指令的定义方式如下：
// 注册一个全局自定义指令 Vue.directive('directiveName', { bind: function(el, binding, vnode){ // 当指令第一次绑定到元素时调用，常用来进行一些初始化设置 ... }, inserted: function(el, binding, vnode){ // 当被绑定的元素插入到 DOM 中时…… ... }, update: function(el, binding, vnode, oldVnode){ // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前 ... }, componentUpdated: function(el, binding, vnode, oldVnode){ // 指令所在组件的 VNode 及其子 VNode 全部更新后调用 ... }, unbind: function(el, binding, vnode){ // 只调用一次，指令与元素解绑时调用，类似于beforeDestroy的功能 ... } });
可以看到在配置对象中只有5个可选的钩子函数，他们的参数有4个，分别是 el、binding、vnode、oldVnode
el ：指令所绑定的元素，可以用来直接操作DOM
binding ： 一个包含了自定义详细信息的对象，内部收集了使用自定义指令时传入的值、修饰符、参数等数据，详细信息可以在官方文档见到，已经说的十分详细了
vnode : Vue编译生成的虚拟节点
oldVnode： 本次Vnode更新之前，上一次产生的虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
看完了自定义指令的内容，接下来我们就来分析clickoutside的具体实现。
import Vue from 'vue'; import { on } from 'element-ui/src/utils/dom'; const nodeList = []; const ctx = '@@clickoutsideContext'; let startClick; let seed = 0; !Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e)); !Vue.prototype.$isServer && on(document, 'mouseup', e => { nodeList.forEach(node => node[ctx].documentHandler(e, startClick)); }); function createDocumentHandler(el, binding, vnode) { return function(mouseup = {}, mousedown = {}) { ... }; } let startClick; let seed = 0; export default { bind(el, binding, vnode) { ... }, update(el, binding, vnode) { ... }, unbind(el) { ... } };
上面是简化后的源码，可以看到首先引入Vue和一个用来进行事件绑定的工具函数on，然后定义了两个全局常量 nodeList 和 ctx 。nodeList 是一个 元素搜集器 ，会将页面中所有绑定了clickoutside指令的dom元素存储起来，而ctx定义了一个命名空间（必须比较特殊，防止和其它特性重名）， 后面会将它添加为元素el的properties ，具体后面会分析到。
接着利用之前引入的Vue进行判断，非服务端则给文档对象添加 mousedown 和 mouseup 事件，在 mousedown 事件回调中，将事件对象存储到 startClick 全局变量中，在 mouseup 事件回调中遍历 nodeList ，然后 分别执行每一个node( 即之前存储起来的clickoutside指令绑定的元素el ) ctx 特性中存储的 documentHandler 函数 。关于ctx property的值会在后面介绍。
最后就是导出了一个 clickoutside 的配置对象，在用到 clickoutside 指令的组件中导入该配置对象，然后在组件中局部注册后就可以使用了。
该配置对象中使用了 bind、update、unbind 三个钩子函数来定义clickoutside指令，主要做的事情就是搜集该自定义指令的相关信息，然后存储到 el 的 ctx 特性上。接下来具体来看一下这个搜集过程。
首先是bind钩子函数：
bind(el, binding, vnode) { nodeList.push(el); const id = seed++; el[ctx] = { id, documentHandler: createDocumentHandler(el, binding, vnode), methodName: binding.expression, bindingFn: binding.value }; }
这里首先将el直接push到nodeList中，这样每次有clickoutside指令绑定到页面上，都会将绑定元素存储到nodeList当中去，即前面说过的 元素搜集器 。接下来将全局变量seed++，并且赋值给一个临时变量id，最后就是给el的ctx特性赋值了，它的值是一个对象，内部包括了:
id ：前面生成的全局唯一id，用来标识该clickoutside指令
documentHandler ：利用 createDocumentHandler 生成的一个回调函数。前面的分析中说到，给页面绑定的mouseup事件回调中，会遍历nodeList，分别执行每一个绑定元素el的ctx特性上的documentHandler函数， 这个函数就是在这里生成的 ，至于这个回调函数究竟是做了什么，后面再详细分析。