mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-15 20:26:52 +08:00
fix: move events collecting from init to setup
This commit is contained in:
106
src/ECharts.ts
106
src/ECharts.ts
@ -101,6 +101,58 @@ export default defineComponent({
|
||||
|
||||
// @ts-expect-error listeners for Vue 2 compatibility
|
||||
const listeners = getCurrentInstance().proxy.$listeners;
|
||||
const realListeners: Record<string, any> = {};
|
||||
|
||||
if (!listeners) {
|
||||
// This is for Vue 3.
|
||||
// We are converting all `on<Event>` props to event listeners compatible with Vue 2
|
||||
// and collect them into `realListeners` so that we can bind them to the chart instance
|
||||
// later in the same way.
|
||||
// For `onNative:<event>` props, we just strip the `Native:` part and collect them into
|
||||
// `nativeListeners` so that we can bind them to the root element directly.
|
||||
Object.keys(attrs)
|
||||
.filter(key => isOn(key))
|
||||
.forEach(key => {
|
||||
// onClick -> c + lick
|
||||
// onZr:click -> z + r:click
|
||||
let event = key.charAt(2).toLowerCase() + key.slice(3);
|
||||
|
||||
// Collect native DOM events
|
||||
if (event.indexOf("native:") === 0) {
|
||||
// native:click -> onClick
|
||||
const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(
|
||||
8
|
||||
)}`;
|
||||
|
||||
nativeListeners[nativeKey] = attrs[key];
|
||||
return;
|
||||
}
|
||||
|
||||
// clickOnce -> ~click
|
||||
// zr:clickOnce -> ~zr:click
|
||||
if (event.substring(event.length - 4) === "Once") {
|
||||
event = `~${event.substring(0, event.length - 4)}`;
|
||||
}
|
||||
|
||||
realListeners[event] = attrs[key];
|
||||
});
|
||||
} else {
|
||||
// This is for Vue 2.
|
||||
// We just need to distinguish normal events and `native:<event>` events and
|
||||
// collect them into `realListeners` and `nativeListeners` respectively.
|
||||
// For `native:<event>` events, we just strip the `native:` part and collect them
|
||||
// into `nativeListeners` so that we can bind them to the root element directly.
|
||||
// native:click -> click
|
||||
// ~native:click -> ~click
|
||||
// &~!native:click -> &~!click
|
||||
Object.keys(listeners).forEach(key => {
|
||||
if (NATIVE_EVENT_RE.test(key)) {
|
||||
nativeListeners[key.replace(NATIVE_EVENT_RE, "$1")] = listeners[key];
|
||||
} else {
|
||||
realListeners[key] = listeners[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function init(option?: Option) {
|
||||
if (!inner.value) {
|
||||
@ -117,60 +169,6 @@ export default defineComponent({
|
||||
instance.group = props.group;
|
||||
}
|
||||
|
||||
const realListeners: Record<string, any> = {};
|
||||
|
||||
if (!listeners) {
|
||||
// This is for Vue 3.
|
||||
// We are converting all `on<Event>` props to event listeners compatible with Vue 2
|
||||
// and collect them into `realListeners` so that we can bind them to the chart instance
|
||||
// later in the same way.
|
||||
// For `onNative:<event>` props, we just strip the `Native:` part and collect them into
|
||||
// `nativeListeners` so that we can bind them to the root element directly.
|
||||
Object.keys(attrs)
|
||||
.filter(key => isOn(key))
|
||||
.forEach(key => {
|
||||
// onClick -> c + lick
|
||||
// onZr:click -> z + r:click
|
||||
let event = key.charAt(2).toLowerCase() + key.slice(3);
|
||||
|
||||
// Collect native DOM events
|
||||
if (event.indexOf("native:") === 0) {
|
||||
// native:click -> onClick
|
||||
const nativeKey = `on${event
|
||||
.charAt(7)
|
||||
.toUpperCase()}${event.slice(8)}`;
|
||||
|
||||
nativeListeners[nativeKey] = attrs[key];
|
||||
return;
|
||||
}
|
||||
|
||||
// clickOnce -> ~click
|
||||
// zr:clickOnce -> ~zr:click
|
||||
if (event.substring(event.length - 4) === "Once") {
|
||||
event = `~${event.substring(0, event.length - 4)}`;
|
||||
}
|
||||
|
||||
realListeners[event] = attrs[key];
|
||||
});
|
||||
} else {
|
||||
// This is for Vue 2.
|
||||
// We just need to distinguish normal events and `native:<event>` events and
|
||||
// collect them into `realListeners` and `nativeListeners` respectively.
|
||||
// For `native:<event>` events, we just strip the `native:` part and collect them
|
||||
// into `nativeListeners` so that we can bind them to the root element directly.
|
||||
// native:click -> click
|
||||
// ~native:click -> ~click
|
||||
// &~!native:click -> &~!click
|
||||
Object.keys(listeners).forEach(key => {
|
||||
if (NATIVE_EVENT_RE.test(key)) {
|
||||
nativeListeners[key.replace(NATIVE_EVENT_RE, "$1")] =
|
||||
listeners[key];
|
||||
} else {
|
||||
realListeners[key] = listeners[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Object.keys(realListeners).forEach(key => {
|
||||
let handler = realListeners[key];
|
||||
|
||||
|
Reference in New Issue
Block a user