We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue.directive('clickOutside', { bind () { this.onClick = (event) => { if (this.el.contains(event.target)) return false if (this.expression) this.vm[this.expression]() } setTimeout(() => { document.addEventListener('click', this.onClick) }) }, unbind () { document.removeEventListener('click', this.onClick) } })
Vue.directive('clickOutside', { bind (el, binding, vnode) { el.event = function (event) { if (!(el === event.target || el.contains(event.target))) { vnode.context[binding.expression](event) } } document.body.addEventListener('click', el.event) }, unbind (el) { document.body.removeEventListener('click', el.event) } })
<script> const vClickOutside = { mounted(el, binding) { el.clickOutside = (e) => { if (el.contains(event.target)) return false if (typeof binding.value === 'function') binding.value(e) } document.addEventListener('click', el.clickOutside) }, beforeUnmount(el) { document.removeEventListener('click', el.clickOutside) } } export default { directives: { clickOutside: vClickOutside, }, methods: { log() { console.log('click') } } } </script> <template> <div class="rect" v-click-outside="log">click outside</div> </template> <style> .rect { margin: 50px; padding: 12px; display: inline-block; border: 1px solid black; user-select: none; } </style>
The text was updated successfully, but these errors were encountered:
Get it. Thx
Sorry, something went wrong.
Vue2.0 的自定义指令不再支持this引用,需要对其进行一定程度的改写。
// 自定义指令, 判断当前点击是否在DOM以外的地方 Vue.directive('clickOutside', { bind (el, binding, vnode) { el.event = function (event) { if (!(el === event.target || el.contains(event.target))) { // call method provided in attribute value vnode.context[binding.expression](event) } } document.body.addEventListener('click', el.event) }, unbind (el) { document.body.removeEventListener('click', el.event) } })
No branches or pull requests
Vue 1.x
Vue 2.x(来自评论)
Vue 3.x
The text was updated successfully, but these errors were encountered: