hi,欢迎访问本站!
当前位置: 首页学习笔记正文

vue点击元素自身之外触发事件指令

用户投稿 学习笔记 15阅读

1注册指令

Vue.directive('clickoutside', { bind(el, binding) { function handler(e) { if (el.contains(e.target)) { return false; } let isReturn = false binding.arg.map(item => { if (document.querySelector('#' + item).contains(e.target)) { isReturn = true } }) if (isReturn){ return false } if (binding.expression) { binding.value(e); } } el._zClickOutside = handler; document.addEventListener('click', handler); }, unbind(el) { // 解除事件监听 document.removeEventListener('click', el._zClickOutside); delete el._zClickOutside; }});

2使用指令

<el-button plain type="primary" v-clickoutside:[classList]="closeIconBlock">外部触发</el-button> <el-button id="cal1" plain type="primary">外部不触发1</el-button> <el-button id="cal4" plain type="primary">外部不触发1</el-button> <el-button id="cal2" plain type="primary">外部不触发2</el-button>data:(){ return { classList: ['cal1','cal2','cal4'] }}

 

标签:
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消