vue实现点击div外部触发事件的封装方法，注：基于element（学习vue的第一个月零不知道几天）
链接处：element-ui网址
实现代码
我是里面内容
我是里面内容2
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
directives: { Clickoutside },
methods: {
clickOut() {
console.log('点击了外面内容')
},
clickOut2() {
console.log('点击了外面内容2')
}
}
}
当然也给出clickoutside.js的源码 ( 只会复制粘贴的机器人！！！)
/**
* v-clickoutside
* @desc 点击元素外面才会触发的事件
* @example
* ```vue
*
* ```
*/
export default {
bind(el, binding, vnode) {
nodeList.push(el);
const id = seed++;
el[ctx] = {
id,
documentHandler: createDocumentHandler(el, binding, vnode),
methodName: binding.expression,
bindingFn: binding.value
};
},
update(el, binding, vnode) {
el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
el[ctx].methodName = binding.expression;
el[ctx].bindingFn = binding.value;
},
unbind(el) {
let len = nodeList.length;
for (let i = 0; i < len; i++) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1);
break;
}
}
delete el[ctx];
}
};
作者：Zs的笔记
相关文章
Efia
2020-10-24
Dior
2021-07-24
Serwa
2020-03-20
Saadiya
2020-10-13
Claire
2021-05-21
Rhoda
2023-07-22
Hester
2023-07-22
Grace
2023-07-22
Vanna
2023-07-22
Peony
2023-07-22
Dorothy
2023-07-22
Dulcea
2023-07-22
Zandra
2023-07-22
Serafina
2023-07-24
Kathy
2023-08-08
Olivia
2023-08-08
Victoria
2023-08-08
Elina
2023-08-08