Vue.directive('clickOutSide', {
bind(el, binding, vnode) {
el.handler = function(e) {
if (el.contains(e.target)) {
return false
}
// vnode.context[binding.expression] = false
binding.value()
}
el.stopProp = function(event) {
event.stopPropagation()
}
el.addEventListener('click', el.stopProp)
document.body.addEventListener('click', el.handler)
},
unbind(el, binding) {
el.removeEventListener('click', el.stopProp)
document.body.removeEventListener('click', el.handler)
}
})
new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})
<div class="tip-register" v-clickOutSide="handleClose"></div>
handleClose() {
// *****
}
https://juejin.im/post/5bf2c6766fb9a049bc4c42ef