详解详解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
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) {
资源评论
