feat(theme): add custom color support for badge components, close #453 (

#455) * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components
pengzhanbo · Feb 7, 2025 · a2282f5 · a2282f5
1 parent 6a8ba55
commit a2282f5
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 11 deletions.
diff --git a/docs/notes/theme/guide/功能/组件.md b/docs/notes/theme/guide/功能/组件.md
@@ -21,10 +21,13 @@ VuePress 支持在 Markdown 文件中使用 组件。
 
 ### Props
 
-| 名称 | 类型                                       | 默认值  | 说明 |
-| ---- | ------------------------------------------ | ------- | ---- |
-| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
-| text | `string`                                   | `''`    | 文本 |
+| 名称         | 类型      | 默认值             | 说明                                                               |
+| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
+| type         | `string` | `'tip'`            | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
+| text         | `string` | `''`               | 文本                                                               |
+| color        | `string` | `''`               | 文本颜色                                                           |
+| bg-color     | `string` | `''`               | 背景颜色                                                           |
+| border-color | `string` | `'transparent'`    | 边框颜色                                                           |
 
 **输入：**
 
@@ -33,6 +36,7 @@ VuePress 支持在 Markdown 文件中使用 组件。
 - VuePress - <Badge type="tip" text="v2" />
 - VuePress - <Badge type="warning" text="v2" />
 - VuePress - <Badge type="danger" text="v2" />
+- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
 ```
 
 **输出：**
@@ -41,6 +45,43 @@ VuePress 支持在 Markdown 文件中使用 组件。
 - VuePress - <Badge type="tip" text="v2" />
 - VuePress - <Badge type="warning" text="v2" />
 - VuePress - <Badge type="danger" text="v2" />
+- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
+
+使用自定义`type`，可以实现更丰富的表现。
+
+**输入：**
+
+1. 在主题任意样式文件中，添加预定的样式：
+
+```css
+/* 浅色主题 */
+.vp-badge.important {
+  color: #cccccc;
+  background-color: #f40f40;
+  border-color: transparent;
+}
+
+/* 深色主题 */
+[data-theme="dark"] .vp-badge.important {
+  color: #f40f40;
+  background-color: #ffffff;
+  border-color: transparent;
+}
+
+/**
+ important 为自定义 type 类型
+*/
+```
+
+2. 使用自定义`type`：
+
+```md :no-line-numbers
+- VuePress - <Badge type="important" text="v2" />
+```
+
+**输出：**
+
+- VuePress - <Badge type="important" text="v2" />
 
 ## 图标
 
@@ -326,3 +367,19 @@ export default defineUserConfig({
   <LinkCard title="链接卡片" href="/" />
   <LinkCard icon="twemoji:astonished-face" title="链接卡片" href="/" />
 </CardGrid>
+
+<style>
+/* 浅色主题 */
+.vp-badge.important {
+  color: #cccccc;
+  background-color: #f40f40;
+  border-color: transparent;
+}
+
+/* 深色主题 */
+[data-theme="dark"] .vp-badge.important {
+  color: #f40f40;
+  background-color: #ffffff;
+  border-color: transparent;
+}
+</style>
diff --git a/docs/notes/theme/guide/组件/徽章.md b/docs/notes/theme/guide/组件/徽章.md
@@ -14,10 +14,13 @@ permalink: /guide/components/badge/
 
 ## Props
 
-| 名称 | 类型                                       | 默认值  | 说明 |
-| ---- | ------------------------------------------ | ------- | ---- |
-| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
-| text | `string`                                   | `''`    | 文本 |
+| 名称         | 类型      | 默认值             | 说明                                                               |
+| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
+| type         | `string` | `'tip'`            | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
+| text         | `string` | `''`               | 文本                                                               |
+| color        | `string` | `''`               | 文本颜色                                                           |
+| bg-color     | `string` | `''`               | 背景颜色                                                           |
+| border-color | `string` | `'transparent'`    | 边框颜色                                                           |
 
 ## 示例
 
@@ -28,6 +31,7 @@ permalink: /guide/components/badge/
 - VuePress - <Badge type="tip" text="v2" />
 - VuePress - <Badge type="warning" text="v2" />
 - VuePress - <Badge type="danger" text="v2" />
+- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
 ```
 
 **输出：**
@@ -36,3 +40,56 @@ permalink: /guide/components/badge/
 - VuePress - <Badge type="tip" text="v2" />
 - VuePress - <Badge type="warning" text="v2" />
 - VuePress - <Badge type="danger" text="v2" />
+- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
+
+使用自定义`type`，可以实现更丰富的表现。
+
+**输入：**
+
+1. 在主题任意样式文件中，添加预定的样式：
+
+```css
+/* 浅色主题 */
+.vp-badge.important {
+  color: #cccccc;
+  background-color: #f40f40;
+  border-color: transparent;
+}
+
+/* 深色主题 */
+[data-theme="dark"] .vp-badge.important {
+  color: #f40f40;
+  background-color: #ffffff;
+  border-color: transparent;
+}
+
+/**
+ important 为自定义 type 类型
+*/
+```
+
+2. 使用自定义`type`：
+
+```md :no-line-numbers
+- VuePress - <Badge type="important" text="v2" />
+```
+
+**输出：**
+
+- VuePress - <Badge type="important" text="v2" />
+
+<style>
+/* 浅色主题 */
+.vp-badge.important {
+  color: #cccccc;
+  background-color: #f40f40;
+  border-color: transparent;
+}
+
+/* 深色主题 */
+[data-theme="dark"] .vp-badge.important {
+  color: #f40f40;
+  background-color: #ffffff;
+  border-color: transparent;
+}
+</style>
diff --git a/theme/src/client/components/global/VPBadge.vue b/theme/src/client/components/global/VPBadge.vue
@@ -1,16 +1,35 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 interface Props {
   text?: string
-  type?: 'info' | 'tip' | 'warning' | 'danger'
+  type?: string
+  color?: string
+  bgColor?: string
+  borderColor?: string
 }
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   type: 'tip',
   text: undefined,
+  color: undefined,
+  bgColor: undefined,
+  borderColor: 'transparent',
+})
+
+const customStyle = computed(() => {
+  if (props.color || props.bgColor) {
+    return {
+      color: props.color,
+      backgroundColor: props.bgColor,
+      borderColor: props.borderColor,
+    }
+  }
+  return {}
 })
 </script>
 
 <template>
-  <span class="vp-badge" :class="type">
+  <span class="vp-badge" :class="type" :style="customStyle">
     <slot>{{ text }}</slot>
   </span>
 </template>