clickoutside.js
export default {
/**
* 綁定方法
* @param {Object} el - The element the directive is bound to.
* @param {Object} binding - An vue directive object
*/
bind(el, binding) {
const documentHandler = (e) => {
if (el.contains(e.target)) return
binding.value(e)
}
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
},
/**
* 更新方法
*/
update() {
},
/**
* 銷毀方法
* @param {Object} el - The element the directive is bound to.
*/
unbind(el) {
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
},
}
In JSX
import clickoutside from 'directives/clickoutside.js'
export default {
// ...somecode
directives: {
clickoutside,
},
render() {
const directives = [{
name: 'clickoutside',
value: (e) => eventHandler,
}]
return (
<div
{...{
directives,
}}
>
some value
</div>
)
},
}
In template
<template>
<div v-clickoutside="eventHandler">something</div>
</template>
<script>
import clickoutside from 'directives/clickoutside.js'
export default {
// ...somecode
directives: {
clickoutside,
},
}
</script>
