directives: {
clickoutside: {
bind(el, binding, vnode) {
function documentHandler(e) {
var reg = RegExp(vnode.context.popupId);
// 这里判断点击的元素是否是本身,是本身,则返回
if (el.contains(e.target) || (vnode.context.popupId && reg.test(e.target.className))) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('touchstart', documentHandler);
},
update() { },
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('touchstart', el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
}
},
//元素上绑定
<div class="md-popup-item" v-show="isPopupItemShow" v-clickoutside="onOutClose">
<slot>aaaaaaa</slot>
</div>
// 绑定的事件
onOutClose() {
this.outClickCose && this.value && this.$_onHidePopup();
},
网友评论