mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-18 06:34:42 +08:00
refactor: change listeners from object to Map
This commit is contained in:
@ -28,7 +28,6 @@ import { register, TAG_NAME } from "./wc";
|
|||||||
import type { PropType, InjectionKey } from "vue";
|
import type { PropType, InjectionKey } from "vue";
|
||||||
import type {
|
import type {
|
||||||
EChartsType,
|
EChartsType,
|
||||||
EventTarget,
|
|
||||||
Option,
|
Option,
|
||||||
Theme,
|
Theme,
|
||||||
ThemeInjection,
|
ThemeInjection,
|
||||||
@ -93,7 +92,8 @@ export default defineComponent({
|
|||||||
const nonEventAttrs = computed(() => omitOn(attrs));
|
const nonEventAttrs = computed(() => omitOn(attrs));
|
||||||
const nativeListeners: Record<string, unknown> = {};
|
const nativeListeners: Record<string, unknown> = {};
|
||||||
|
|
||||||
const listeners: Record<string, any> = {};
|
const listeners: Map<{ event: string; once?: boolean; zr?: boolean }, any> =
|
||||||
|
new Map();
|
||||||
|
|
||||||
// We are converting all `on<Event>` props and collect them into `listeners` so that
|
// We are converting all `on<Event>` props and collect them into `listeners` so that
|
||||||
// we can bind them to the chart instance later.
|
// we can bind them to the chart instance later.
|
||||||
@ -102,28 +102,32 @@ export default defineComponent({
|
|||||||
Object.keys(attrs)
|
Object.keys(attrs)
|
||||||
.filter(key => isOn(key))
|
.filter(key => isOn(key))
|
||||||
.forEach(key => {
|
.forEach(key => {
|
||||||
// onClick -> c + lick
|
|
||||||
// onZr:click -> z + r:click
|
|
||||||
let event = key.charAt(2).toLowerCase() + key.slice(3);
|
|
||||||
|
|
||||||
// Collect native DOM events
|
// Collect native DOM events
|
||||||
if (event.indexOf("native:") === 0) {
|
if (key.indexOf("Native:") === 2) {
|
||||||
// native:click -> onClick
|
// onNative:click -> onClick
|
||||||
const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(
|
const nativeKey = `on${key.charAt(9).toUpperCase()}${key.slice(10)}`;
|
||||||
8
|
|
||||||
)}`;
|
|
||||||
|
|
||||||
nativeListeners[nativeKey] = attrs[key];
|
nativeListeners[nativeKey] = attrs[key];
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// clickOnce -> ~click
|
// onClick -> c + lick
|
||||||
// zr:clickOnce -> ~zr:click
|
// onZr:click -> z + r:click
|
||||||
if (event.substring(event.length - 4) === "Once") {
|
let event = key.charAt(2).toLowerCase() + key.slice(3);
|
||||||
event = `~${event.substring(0, event.length - 4)}`;
|
|
||||||
|
let zr: boolean | undefined;
|
||||||
|
if (event.indexOf("zr:") === 0) {
|
||||||
|
zr = true;
|
||||||
|
event = event.substring(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
listeners[event] = attrs[key];
|
let once: boolean | undefined;
|
||||||
|
if (event.substring(event.length - 4) === "Once") {
|
||||||
|
once = true;
|
||||||
|
event = event.substring(0, event.length - 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
listeners.set({ event, zr, once }, attrs[key]);
|
||||||
});
|
});
|
||||||
|
|
||||||
function init(option?: Option) {
|
function init(option?: Option) {
|
||||||
@ -141,28 +145,14 @@ export default defineComponent({
|
|||||||
instance.group = props.group;
|
instance.group = props.group;
|
||||||
}
|
}
|
||||||
|
|
||||||
Object.keys(listeners).forEach(key => {
|
listeners.forEach((handler, { zr, once, event }) => {
|
||||||
let handler = listeners[key];
|
|
||||||
|
|
||||||
if (!handler) {
|
if (!handler) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let event = key.toLowerCase();
|
const target = zr ? instance.getZr() : instance;
|
||||||
if (event.charAt(0) === "~") {
|
|
||||||
event = event.substring(1);
|
|
||||||
handler.__once__ = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
let target: EventTarget = instance;
|
|
||||||
if (event.indexOf("zr:") === 0) {
|
|
||||||
target = instance.getZr();
|
|
||||||
event = event.substring(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (handler.__once__) {
|
|
||||||
delete handler.__once__;
|
|
||||||
|
|
||||||
|
if (once) {
|
||||||
const raw = handler;
|
const raw = handler;
|
||||||
|
|
||||||
handler = (...args: any[]) => {
|
handler = (...args: any[]) => {
|
||||||
|
@ -26,8 +26,6 @@ export type UpdateOptions = SetOptionOpts;
|
|||||||
export type UpdateOptionsInjection = Injection<UpdateOptions>;
|
export type UpdateOptionsInjection = Injection<UpdateOptions>;
|
||||||
|
|
||||||
export type EChartsType = ReturnType<InitType>;
|
export type EChartsType = ReturnType<InitType>;
|
||||||
type ZRenderType = ReturnType<EChartsType["getZr"]>;
|
|
||||||
export type EventTarget = EChartsType | ZRenderType;
|
|
||||||
|
|
||||||
type SetOptionType = EChartsType["setOption"];
|
type SetOptionType = EChartsType["setOption"];
|
||||||
export type Option = Parameters<SetOptionType>[0];
|
export type Option = Parameters<SetOptionType>[0];
|
||||||
|
Reference in New Issue
Block a user