html
<div v-clickoutside="handleClose"></div>
//当点击此div外的任何元素 将会触发 v-clickoutside="handleClose"的 handleClose
构造点击函数
const clickoutside = {
// 初始化指令
bind (el, binding, vnode) {
function documentHandler (e) {
// 这里判断点击的元素是否是本身,是本身,则返回
if (el.contains(e.target)) {
return false
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
binding.value(e)
}
}
// 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
},
update () { },
unbind (el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
}
在vue里注册构造的函数
export default {
directives: { clickoutside },
methods:{
handleClose () { // 点击除了页面其他地方关闭车型选择
this.carBrandOff = false
}
}
}