vue自定义指令--clickOutside
这个指令通过vue的自定义指令的钩子函数实现。首先我们先看看vue官方的文档。emmmm 看着好像有点困难,没关系官方文档也给出了例子。现在应该就明白了不少了吧。clickoutside 这个指令用在哪里呢?比如写法export default {bind (el, binding, vnode) {function documentHandl...
·
这个指令通过vue的自定义指令的钩子函数实现。
首先我们先看看vue官方的文档。
emmmm 看着好像有点困难,没关系官方文档也给出了例子。
现在应该就明白了不少了吧。
clickoutside 这个指令用在哪里呢?
比如
写法
export default {
bind (el, binding, vnode) {
function documentHandler (e) {
// el 包含其触发的元素 那当然不能触发啦
if (el.contains(e.target)) {
return false;
}
// 满足上面条件, 并且expression 的值不为空 触发(希望value是个函数)
if (binding.expression) {
// 调用自定义指令传来的函数,e是事件原对象 作为参数(为什么传e 因为有些情况需要把这个对象抛出方便用户的操作)
binding.value(e);
}
}
// 嗯??? 这么写有什么作用吗? 当然有了,如果你想取消事件的监听,那么是不是需要这个函数。
el.__vueClickOutside__ = documentHandler;
// 在document上监听事件
document.addEventListener('click', documentHandler);
},
update () {
},
unbind (el, binding) {
// 取消事件监听(el.__vueClickOutside 派上用场了吧)
document.removeEventListener('click', el.__vueClickOutside__);
// 既然都取消了 那么这个属性就没必要存在了
delete el.__vueClickOutside__;
}
};
下拉框组件上的引用
呐 大功告成!!! 不知道你们看的看不懂。我只是个坐笔记的。
更多推荐
已为社区贡献1条内容
所有评论(0)