add vue

packages/artplayer-plugin-danmuku/package.json

@@ -18,5 +18,8 @@
     "html5",
     "video",
     "player"
-  ]
-}
+  ],
+  "dependencies": {
+    "vue": "^3.2.33"
+  }
+}

packages/artplayer-plugin-danmuku/src/control/App.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>{{ test }}</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            test: 'test',
+            option: {
+                danmuku: [],
+                speed: 5,
+                margin: [10, 100],
+                opacity: 1,
+                fontSize: 25,
+                filter: () => true,
+                antiOverlap: true,
+                useWorker: true,
+                synchronousPlayback: false,
+            },
+            danmu: {
+                text: '',
+                mode: 0,
+                time: 0,
+                color: '#ffffff',
+                border: true,
+            },
+        };
+    },
+    mounted() {
+        this.option = this.$danmuku.option;
+    },
+};
+</script>

packages/artplayer-plugin-danmuku/src/control/index.js

@@ -1,14 +1,35 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
 export default class Control {
-    constructor(danmuku) {
+    constructor(art, danmuku) {
+        this.art = art;
         this.danmuku = danmuku;
         this.apps = new Map();
     }
 
-    mount() {
-        //
+    mount($el) {
+        const that = this;
+        const app = createApp(App);
+
+        app.use({
+            install(app) {
+                app.config.globalProperties.$art = that.art;
+                app.config.globalProperties.$danmuku = that.danmuku;
+            },
+        });
+
+        app.mount($el);
+        this.apps.set($el, app);
+
+        return app;
     }
 
-    unmount() {
-        //
+    unmount($el) {
+        const app = this.apps.get($el);
+        if (app) {
+            app.unmount();
+            this.apps.delete($el);
+        }
     }
 }

packages/artplayer-plugin-danmuku/src/index.js

@@ -4,7 +4,7 @@ import Control from './control';
 export default function artplayerPluginDanmuku(option) {
     return (art) => {
         const danmuku = new Danmuku(art, option);
-        const control = new Control(danmuku);
+        const control = new Control(art, danmuku);
 
         return {
             name: 'artplayerPluginDanmuku',