（一）场景：
例如百度的搜索框，当我们输入搜索内容的时候会弹出搜索建议提示窗，然后当我们点击其他区域的时候这个弹窗就会收起。上一张图看一下：
demo.png
（二）先要知道的基础点：
- vm.$isServer
当前 Vue 实例是否运行于服务器。
该属性不是直接定义在实例对象 vm 上，而是定义在原型对象上 => Vue.prototype.$isServer
该属性根据当前运行的环境以及 process.ven.VUE_ENV 自动设置。
node.contains( otherNode )
如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.vue的自定义指令 官方文档
示例写法：
import Vue from 'vue'
Vue.directive('demo', {
// 当被绑定的元素插入到dom时……
inserted (el) {},
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
bind (el, binding, vnode) {},
// 所在组件的 VNode 更新时调用
update (el, binding, vnode) {},
// 只调用一次，指令与元素解绑时调用
unbind (el, binding, vnode) {}
})
使用：
<div v-demo>
bind，update，unbind等等这些都是钩子函数，它们会被传入一些参数（下面说明的都是要用到的，了解更多请移步官方文档）：
- el：指令所绑定的元素，可以用来直接操作 DOM
- binding
- name：指令名
- value：绑定的值
- expression：指令表达式
- vnode：虚拟节点
（三）实现：
以下代码参考自elementui的源码，会有解读
import Vue from 'vue'
const ctx = 'clickoutside'
const nodeList = []
const isServer = Vue.prototype.$isServer
let seed = 0
let startClick
// 用来绑定事件的方法，它是一个自执行的函数，会根据是否运行于服务器和是否支持addEventListener来返回一个function
const on = (function () {
if (!isServer && document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
})()
// 返回一个方法用来在点击的时候触发函数（触发之前会判断该元素是不是el，是不是focusElment以及他们的后代元素，如果是则不会执行函数）
function createDocumentHandler (el, binding, vnode) {
return function (mouseup = {}, mousedown = {}) {
if (
!vnode ||
!vnode.context ||
!mouseup.target ||
!mousedown.target ||
el.contains(mouseup.target) ||
el.contains(mousedown.target) ||
el === mouseup.target || (vnode.context.focusElment &&
(vnode.context.focusElment.contains(mouseup.target) ||
vnode.context.focusElment.contains(mousedown.target)))
) {
return
}
if (binding.expression &&
el[ctx].methodName &&
vnode.context[el[ctx].methodName]) {
vnode.context[el[ctx].methodName]()
} else {
el[ctx].bindingFn && el[ctx].bindingFn()
}
}
}
if (!isServer) {
on(document, 'mousedown', e => (startClick = e))
on(document, 'mouseup', e => {
// 循环所有的绑定节点，把它们的documentHandler属性所绑定的函数执行一次（这个时候得到的刚好是上面的那个判断执行的函数）
nodeList.forEach(node => node[ctx].documentHandler(e, startClick))
})
}
Vue.directive('clickoutside', {
// 当被绑定的元素插入到dom时……
inserted (el) {
console.log(el)
},
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
// 把绑定的元素扔到nodeList里面，并给绑定元素设置属性
// documentHandler属性在nodeList.forEach的时候执行并得到一个function
// bindingFn 是绑定的那个值，用来执行的
bind (el, binding, vnode) {
nodeList.push(el)
const id = seed++
el[ctx] = {
id,
documentHandler: createDocumentHandler(el, binding, vnode),
methodName: binding.expression,
bindingFn: binding.value
}
},
// 所在组件的 VNode 更新时调用
update (el, binding, vnode) {
el[ctx].documentHandler = createDocumentHandler(el, binding, vnode)
el[ctx].methodName = binding.expression
el[ctx].bindingFn = binding.value
},
// 只调用一次，指令与元素解绑时调用
unbind (el, binding, vnode) {
const len = nodeList.length
for (let i = 0; i < len; i++) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1)
break
}
}
delete el[ctx]
}
})
使用：
<template lang='pug'>
.test-wrap
input.input(
v-model='text'
v-clickoutside='handleClose'
@focus='visible = true'
placeholder='请填写搜索内容'
)
ul.list-wrap(v-show='visible' ref='listWrap')
li(v-for='item in list' @click='setValue(item.text)') {{item.text}}
</template>
<script>
export default {
data () {
return {
text: '',
visible: false,
list: [{
text: '1111',
id: 1
}, {
text: 'aaaaa',
id: 2
}]
}
},
computed: {
focusElment () {
return this.$refs.listWrap
}
},
methods: {
handleClose () {
this.visible = false
},
setValue (val) {
this.text = val
}
}
}
</script>
调用解析：
- template里面设置v-clickoutside='handleClose'调用这个自定义指令
- list-wrap用visible来控制显示
- 把list-wrap设置为focusElment，目的是在点击这个区域的时候不去触发bindingFn，源码中(vnode.context.focusElment &&
(vnode.context.focusElment.contains(mouseup.target) ||
vnode.context.focusElment.contains(mousedown.target))这段代码解决这个问题 - handleClose函数设置visible的值为false，以隐藏下拉窗口
这个实现就分享这些，欢迎拍砖～
