feat: gradient 支持配置纯色 (#787)

WeBankFinTech · May 6, 2024 · f7e04b8 · f7e04b8
1 parent b16fb4a
commit f7e04b8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/components/text/text.tsx b/components/text/text.tsx
@@ -36,6 +36,10 @@ export default defineComponent({
                 return {
                     backgroundImage: `linear-gradient(${deg}, ${props.gradient.from}, ${props.gradient.to})`,
                 };
+            } else if (typeof props.gradient === 'string') {
+                return {
+                    color: props.gradient,
+                };
             }
             return {};
         });

diff --git a/docs/.vitepress/components/text/gradient.vue b/docs/.vitepress/components/text/gradient.vue
@@ -1,18 +1,15 @@
 <template>
     <div>
-        <FText :gradient="gradientColor1">
-            这是渐变色的文本，角度为数值类型
-        </FText>
+        <FText :gradient="gradientColor1"> 这是渐变色的文本，角度为数值类型 </FText>
     </div>
     <div>
-        <FText :gradient="gradientColor2">
-            这是渐变色的文本，角度为字符串类型
-        </FText>
+        <FText :gradient="gradientColor2"> 这是渐变色的文本，角度为字符串类型 </FText>
     </div>
     <div>
-        <FText :gradient="color">
-            这是纯色的文本
-        </FText>
+        <FText gradient="#5384ff"> 这是纯色的文本 </FText>
+    </div>
+    <div>
+        <FText gradient="#722ed1"> 这是纯色文本，没有渐变角度文本 </FText>
     </div>
 </template>
 
@@ -28,9 +25,4 @@ const gradientColor2 = {
     from: '#5384ff',
     to: '#00cb91',
 };
-
-const color = {
-    from: '#5384ff',
-    to: '#5384ff',
-};
 </script>
diff --git a/docs/.vitepress/components/text/index.md b/docs/.vitepress/components/text/index.md
@@ -43,33 +43,34 @@ mixin.vue
 :::
 
 ### 颜色渐变
-通过`gradient`，可以设置文字的颜色渐变，纯色则form和to保持一致即可。
+
+通过`gradient`，可以设置文字的颜色渐变
 
 :::demo
 gradient.vue
 :::
 
 ## Text Props
 
-| 属性     | 说明                                                        | 类型               | 默认值    |
-| -------- | ----------------------------------------------------------- | ------------------ | --------- |
-| type     | 类型，可选值为`default` `success` `info` `warning` `danger` | `string`           | `default` |
-| size     | 尺寸，可选值为`small` `middle` `large`                      | `string`           | `middle`  |
-| strong   | 是否字体加粗                                                | `boolean`          | `false`   |
-| italic   | 是否字体倾斜                                                | `boolean`          | `false`   |
-| tag      | 自定义元素标签，可选值为`span` `div` `p` `h1` `h2` `h3` 等  | `string`           | `span`    |
-| gradient | 文本渐变色配置                                              | `Object<Gradient>` | `-`       |
+| 属性     | 说明                                                        | 类型                      | 默认值    |
+| -------- | ----------------------------------------------------------- | ------------------------- | --------- |
+| type     | 类型，可选值为`default` `success` `info` `warning` `danger` | `string`                  | `default` |
+| size     | 尺寸，可选值为`small` `middle` `large`                      | `string`                  | `middle`  |
+| strong   | 是否字体加粗                                                | `boolean`                 | `false`   |
+| italic   | 是否字体倾斜                                                | `boolean`                 | `false`   |
+| tag      | 自定义元素标签，可选值为`span` `div` `p` `h1` `h2` `h3` 等  | `string`                  | `span`    |
+| gradient | 文本渐变色配置                                              | `string/Object<Gradient>` | `-`       |
 
 ## Text Slots
 
 | slot 名称 | 说明     |
 | --------- | -------- |
 | default   | 默认内容 |
 
-## Gradient Props 
+## Gradient Props
 
-| 属性 | 说明                              | 类型          | 默认值 |
-| ---- | --------------------------------- | ------------- | ------ |
-| from | 起始颜色                          | string        | `-`    |
-| to   | 结束颜色                          | string        | `-`    |
-| deg  | 渐变角度，默认为0，即从上之下渐变 | number/string | `0`    |
+| 属性 | 说明                               | 类型          | 默认值 |
+| ---- | ---------------------------------- | ------------- | ------ |
+| from | 起始颜色                           | string        | `-`    |
+| to   | 结束颜色                           | string        | `-`    |
+| deg  | 渐变角度，默认为 0，即从上之下渐变 | number/string | `0`    |