vue自定义指令clickoutside实现点击其他元素才会触发
clickoutside.js
// 代码内容
const clickoutsideContext = '@@clickoutsideContext';
export default {
bind(el, binding, vnode) {
const documentHandler = (e) => {
if (vnode.context && !el.contains(e.target)) {
vnode.context[el[clickoutsideContext].methodName]();
}
};
el[clickoutsideContext] = {
documentHandler,
methodName: binding.expression,
arg: binding.arg || 'click',
};
document.addEventListener(el[clickoutsideContext].arg, documentHandler);
},
update(el, binding) {
el[clickoutsideContext].methodName = binding.expression;
},
unbind(el) {
document.removeEventListener(
el[clickoutsideContext].arg,
el[clickoutsideContext].documentHandler);
},
install(Vue) {
Vue.directive('clickoutside', {
bind: this.bind,
unbind: this.unbind,
});
},
};
使用
在.vue 文件中
1. 引入
import Clickoutside from '@/utils/clickoutside';
2. 引入自定义指令
directives: {
Clickoutside,
},
3.在元素上使用
<div class="tel" v-clickoutside="do">
</div>
methods: {
do() {
console.log('点击这个元素之外的元素之执行此方法')
}
}
}
