add danmuku style

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

@@ -1,5 +1,5 @@
 <template>
-    <div>{{ test }}</div>
+    <div class="artplayer-plugin-danmuku">{{ test }}</div>
 </template>
 
 <script>
@@ -28,7 +28,7 @@ export default {
         };
     },
     mounted() {
-        this.option = this.$danmuku.option;
+        this.option = Object.assign(this.option, this.$danmuku.option);
     },
 };
 </script>

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

@@ -1,6 +1,16 @@
+import style from 'bundle-text:./style.less';
 import { createApp } from 'vue';
 import App from './App.vue';
 
+if (typeof document !== 'undefined') {
+    if (!document.getElementById('artplayer-plugin-danmuku-style')) {
+        const $style = document.createElement('style');
+        $style.id = 'artplayer-plugin-danmuku-style';
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
 export default class Control {
     constructor(art, danmuku) {
         this.art = art;

packages/artplayer-plugin-danmuku/src/control/style.less

@@ -0,0 +1,3 @@
+.artplayer-plugin-danmuku {
+    position: relative;
+}

packages/artplayer/src/index.js

@@ -223,10 +223,12 @@ Artplayer.FAST_FORWARD_VALUE = 3;
 Artplayer.FAST_FORWARD_TIME = 1000;
 
 if (typeof document !== 'undefined') {
-    const $style = document.createElement('style');
-    $style.dataset.from = 'artplayer';
-    $style.textContent = style;
-    document.head.appendChild($style);
+    if (!document.getElementById('artplayer-style')) {
+        const $style = document.createElement('style');
+        $style.id = 'artplayer-style';
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
 }
 
 if (typeof window !== 'undefined') {