// 加入到要绑定数据的组件中
v-on="rowEventList"
data() {
return {
// 事件集合
eventList:{},
// 交互data
listenerConfig: [
{
on: (eventName, triggerElement) => {
// 绑定事件 row, column, cell, event 事件参数
this.rowEventList[eventName] = (row, column, cell, event) => {
// 事件触发后处理
const data = {
value: row,
dimensionKey: column.property,
datasetIndex: row.index
}
};
},
off: (eventName) => {
// 删除事件
delete this.rowEventList[eventName];
},
event: [
// 以下事件去绑定
"click", "dblclick", "mouseover", "mouseout"
],
area: [
// 以下区域去绑定
"main"
]
},
],
};
},
computed:{
eventListeners() {
// 事件集合
return this.eventList;
},
}
methods: {
// 绑定事件
addEventListener(eventName, triggerElement) {
let eventObj = this.getEffectObj(eventName, triggerElement);
if (eventObj) eventObj.on(eventName, triggerElement);
},
// 删除事件
removeEventListener(eventName, triggerElement) {
let eventObj = this.getEffectObj(eventName, triggerElement);
if (eventObj) eventObj.off(eventName, triggerElement);
},
// 获取满足要求的事件 (事件类型:listenerConfig.event 包含eventName) (事件区域:listenerConfig.area 包含triggerElement)
getEffectObj(eventName, triggerElement) {
for (let i in this.listenerConfig) {
if (this.listenerConfig[i].event.indexOf(eventName) > -1 && this.listenerConfig[i].area.indexOf(triggerElement) > -1) {
return this.listenerConfig[i];
}
}
return null;
},
}
v-on动态绑定事件
最新推荐文章于 2024-04-19 18:32:11 发布