npm install vue-click-outside
方法一:
<span v-clickoutside="handleClose">内容</span>
<span @click.stop="isShow">点击出现的内容</span>
<script>
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__;
},
};
export default {
directives: { clickoutside },
methods: {
isShow() {
this.show = !this.show;
},
handleClose(){
this.show = false;
}
}
}
</script>
方法二:
<span v-click-outside="handleClose">其余内容</span>
<span @click.stop="isShow">点击出现的内容</span>
import { clickOutside } from 'common/js/event';
export default {
directives: {clickOutside},
methods: {
isShow() {
this.show = !this.show;
},
handleClose() {
this.show = false;
}
}
}
event.js
export const clickOutside = {
bind: function(el, binding, vNode) {
el.__vueClickOutside__ = event => {
if (!el.contains(event.target)) {
// call method provided in v-click-outside value
vNode.context[binding.expression](event);
event.stopPropagation();
}
};
document.body.addEventListener('click', el.__vueClickOutside__);
},
unbind: function(el, binding, vNode) {
// Remove Event Listeners
document.removeEventListener('click', el.__vueClickOutside__);
el.__vueClickOutside__ = null;
},
};