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

CHANGELOG.md

@@ -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.

README.md

@@ -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 -->

README.zh-Hans.md

@@ -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 -->

package.json

@@ -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",

rollup.config.js

@@ -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",

src/ECharts.ts

@@ -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,19 +100,31 @@ export default defineComponent({
         instance.group = props.group;
       }
 
+      let realListeners = listeners;
+      if (!realListeners) {
+        realListeners = {};
+
         Object.keys(attrs)
-        .filter(key => key.indexOf("on") === 0)
+          .filter(key => key.indexOf("on") === 0 && key.length > 2)
           .forEach(key => {
-          const handler = attrs[key] as any;
+            // onClick    -> c + lick
+            // onZr:click -> z + r:click
+            const event = key.charAt(2).toLowerCase() + key.slice(3);
+            realListeners[event] = attrs[key];
+          });
+      }
+
+      Object.keys(realListeners).forEach(key => {
+        const handler = realListeners[key] as any;
 
         if (!handler) {
           return;
         }
 
-          if (key.indexOf("onZr:") === 0) {
+        if (key.indexOf("zr:") === 0) {
-            instance.getZr().on(key.slice(5).toLowerCase(), handler);
+          instance.getZr().on(key.slice(3).toLowerCase(), handler);
         } else {
-            instance.on(key.slice(2).toLowerCase(), handler);
+          instance.on(key.toLowerCase(), handler);
         }
       });
 

src/demo/Demo.vue

@@ -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() {
+    handleClick(...args) {
-      console.log("click from echarts");
+      console.log("click from echarts", ...args);
     },
-    handleZrClick() {
+    handleZrClick(...args) {
-      console.log("click from zrender");
+      console.log("click from zrender", ...args);
     },
     refresh() {
       // simulating async data from server

src/types.ts

@@ -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>;