feat: customCSS for addon-bangumi (#356)

YunYouJun · Feb 20, 2024 · 58054cc · 58054cc · github-actions · Feb 20, 2024
1 parent 1e9c1c9
commit 58054cc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/valaxy-addon-bangumi/components/ValaxyBangumi.vue b/packages/valaxy-addon-bangumi/components/ValaxyBangumi.vue
@@ -8,17 +8,30 @@
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-expect-error
 import { defineCustomElements } from 'bilibili-bangumi-component/dist/cjs/loader.cjs'
+import { onMounted, ref } from 'vue'
 import { useAddonBangumi } from '../client'
 
 defineCustomElements()
 
+const bangumiRef = ref<HTMLElement>()
+
 const bangumiOptions = useAddonBangumi()
 
-const { api, bgmEnabled, bgmUid, bilibiliEnabled, bilibiliUid } = bangumiOptions.value
+const { api, bgmEnabled, bgmUid, bilibiliEnabled, bilibiliUid, customCss } = bangumiOptions.value
+
+onMounted(() => {
+  if (!customCss)
+    return
+
+  const sheet = new CSSStyleSheet()
+  sheet.replaceSync(customCss)
+  bangumiRef.value?.shadowRoot?.adoptedStyleSheets.push(sheet)
+})
 </script>
 
 <template>
   <bilibili-bangumi
+    ref="bangumiRef"
     :api="api"
     :bgm-enabled="bgmEnabled"
     :bgm-uid="bgmUid"

diff --git a/packages/valaxy-addon-bangumi/types/index.ts b/packages/valaxy-addon-bangumi/types/index.ts
@@ -25,4 +25,11 @@ export interface BangumiOptions {
    * @default true
    */
   bgmEnabled?: boolean
+
+  /**
+   * 自定义 css
+   * @example
+   * .bbc-bangumi-title a { color: red; }
+   */
+  customCss?: string
 }