fix: fix event support for Vue 2, fix #510

This commit is contained in:
Justineo
2021-02-23 20:09:16 +08:00
parent 175d823200
commit 6629540a8e
8 changed files with 49 additions and 25 deletions

View File

@ -1,3 +1,7 @@
## 6.0.0-alpha.5
* Fix event support for Vue 2.
## 6.0.0-alpha.4
* Add missing injection key exports.

View File

@ -100,7 +100,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
```
<!-- vue3Scripts:end -->
@ -125,7 +125,7 @@ app.component('v-chart', VueECharts)
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
```
<!-- vue2Scripts:end -->

View File

@ -98,7 +98,7 @@ import "echarts";
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
```
<!-- vue3Scripts:end -->
@ -123,7 +123,7 @@ app.component('v-chart', VueECharts)
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
```
<!-- vue2Scripts:end -->

View File

@ -1,6 +1,6 @@
{
"name": "vue-echarts",
"version": "6.0.0-alpha.4",
"version": "6.0.0-alpha.5",
"scripts": {
"serve": "vue-cli-service serve",
"build:demo": "vue-cli-service build",

View File

@ -58,6 +58,7 @@ const options = [
file: "dist/index.umd.js",
format: "umd",
name: "VueECharts",
exports: "named",
sourcemap: true,
globals: {
"vue-demi": "VueDemi",
@ -69,6 +70,7 @@ const options = [
file: "dist/index.umd.min.js",
format: "umd",
name: "VueECharts",
exports: "named",
sourcemap: true,
globals: {
"vue-demi": "VueDemi",

View File

@ -54,7 +54,9 @@ export default defineComponent({
...autoresizeProps,
...loadingProps
},
setup(props, { attrs }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// @ts-expect-error
setup(props, { attrs, listeners }) {
const root = ref<HTMLElement>();
const chart = shallowRef<EChartsType>();
const manualOption = shallowRef<Option>();
@ -98,21 +100,33 @@ export default defineComponent({
instance.group = props.group;
}
Object.keys(attrs)
.filter(key => key.indexOf("on") === 0)
.forEach(key => {
const handler = attrs[key] as any;
let realListeners = listeners;
if (!realListeners) {
realListeners = {};
if (!handler) {
return;
}
Object.keys(attrs)
.filter(key => key.indexOf("on") === 0 && key.length > 2)
.forEach(key => {
// onClick -> c + lick
// onZr:click -> z + r:click
const event = key.charAt(2).toLowerCase() + key.slice(3);
realListeners[event] = attrs[key];
});
}
if (key.indexOf("onZr:") === 0) {
instance.getZr().on(key.slice(5).toLowerCase(), handler);
} else {
instance.on(key.slice(2).toLowerCase(), handler);
}
});
Object.keys(realListeners).forEach(key => {
const handler = realListeners[key] as any;
if (!handler) {
return;
}
if (key.indexOf("zr:") === 0) {
instance.getZr().on(key.slice(3).toLowerCase(), handler);
} else {
instance.on(key.toLowerCase(), handler);
}
});
instance.setOption(option || realOption.value, realUpdateOptions.value);
}

View File

@ -272,7 +272,7 @@
<script>
/* eslint-disable no-console */
import qs from "qs";
import VChart from "../../dist/index.esm";
import VChart from "../ECharts";
import * as echarts from "echarts/core";
import {
@ -397,11 +397,11 @@ export default {
};
},
methods: {
handleClick() {
console.log("click from echarts");
handleClick(...args) {
console.log("click from echarts", ...args);
},
handleZrClick() {
console.log("click from zrender");
handleZrClick(...args) {
console.log("click from zrender", ...args);
},
refresh() {
// simulating async data from server

View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { init } from "echarts/core";
import { Ref } from "vue";
@ -21,4 +22,7 @@ export interface UpdateOptions {
replaceMerge?: any;
transition?: any;
}
export type UpdateOptionsInjection = UpdateOptions | null | Ref<UpdateOptions | null>;
export type UpdateOptionsInjection =
| UpdateOptions
| null
| Ref<UpdateOptions | null>;