update docs

packages/artplayer-document/docs/en/Overview.md

@@ -82,45 +82,47 @@ The size of the player depends on the size of the `container`, so your `containe
 
 ### Use in `Vue`
 
+[Click to open an online demo](https://codesandbox.io/s/artplayer-vue-demo-3lz7m?file=/src/App.vue)
+
 Create component: `Artplayer.vue`
 
 ```js
-import Artplayer from 'artplayer';
+<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
 
 export default {
-    data() {
-        return {
-            instance: null,
-        };
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
     },
-    props: {
-        option: {
-            type: Object,
-            required: true,
-        },
-        getInstance: Function,
-    },
-    mounted() {
-        this.instance = new Artplayer({
-            ...this.option,
-            container: this.$refs.artRef,
-        });
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
 
-        this.$nextTick(() => {
-            this.$emit('getInstance', this.instance);
-        });
-    },
-    beforeDestroy() {
-        if (this.instance && this.instance.destroy) {
-            this.instance.destroy();
-        }
-    },
-    render(h) {
-        return h('div', {
-            ref: 'artRef',
-        });
-    },
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeUnmount() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy();
+    }
+  },
 };
+</script>
 ```
 
 Import the `Artplayer.vue` component
@@ -159,6 +161,8 @@ export default {
 
 ### Use in `React`
 
+[Click to open an online demo](https://codesandbox.io/s/aged-fire-n74859y9rl?file=/src/index.js)
+
 Create component: `Artplayer.jsx`
 
 ```jsx

packages/artplayer-document/docs/zh-cn/Overview.md

@@ -75,45 +75,47 @@ const Artplayer = require('artplayer');
 
 ### 与 `Vue` 使用
 
+[点击打开在线演示](https://codesandbox.io/s/artplayer-vue-demo-3lz7m?file=/src/App.vue)
+
 创建 `Artplayer` 组件: `Artplayer.vue`
 
 ```js
-import Artplayer from 'artplayer';
+<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
 
 export default {
-    data() {
-        return {
-            instance: null,
-        };
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
     },
-    props: {
-        option: {
-            type: Object,
-            required: true,
-        },
-        getInstance: Function,
-    },
-    mounted() {
-        this.instance = new Artplayer({
-            ...this.option,
-            container: this.$refs.artRef,
-        });
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
 
-        this.$nextTick(() => {
-            this.$emit('getInstance', this.instance);
-        });
-    },
-    beforeDestroy() {
-        if (this.instance && this.instance.destroy) {
-            this.instance.destroy();
-        }
-    },
-    render(h) {
-        return h('div', {
-            ref: 'artRef',
-        });
-    },
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeUnmount() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy();
+    }
+  },
 };
+</script>
 ```
 
 引入 `Artplayer.vue` 组件
@@ -152,6 +154,8 @@ export default {
 
 ### 与 `React` 使用
 
+[点击打开在线演示](https://codesandbox.io/s/aged-fire-n74859y9rl?file=/src/index.js)
+
 创建 `Artplayer` 组件: `Artplayer.jsx`
 
 ```jsx