详解Element 指令clickoutside源码分析

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

看完了自定义指令的内容，接下来我们就来分析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 ，具体后面会分析到。