feat(Text): 文本组件新增 gradient 属性 (#779)

* feat: 文本组件新增gradient属性,增加相应的demo

* feat: pr问题修改,增加统一处理deg的方法

---------

Co-authored-by: blankzhang <[email protected]>

components/_util/utils.ts

@@ -104,6 +104,20 @@ export const pxfy = (value: string | number): string => {
     return value as string;
 };
 
+// 90 => 90deg
+export const degfy = (value: string | number): string => {
+    // 如果输入值是字符串，且已经包含了"deg"后缀，则直接返回
+    if (isString(value) && value.endsWith('deg')) {
+        return value;
+    }
+    if (isFinite(Number(value))) {
+        return `${Number(value)}deg`;
+    }
+
+    // 如果输入值既不是数字也不是字符串，或者是一个不能转换为数字的字符串，返回一个错误信息
+    throw new Error(`Invalid deg: ${value}`);
+};
+
 export function getParentNode(node: Node): Node | null {
     // document type
     if (node.nodeType === 9) {

components/text/interface.ts

@@ -1,3 +1,9 @@
 export type Type = 'default' | 'success' | 'info' | 'warning' | 'danger';
 
 export type Size = 'small' | 'middle' | 'large';
+
+export interface Gradient {
+    from: string;
+    to: string;
+    deg: number | string;
+}

components/text/props.ts

@@ -1,7 +1,6 @@
 import type { ComponentObjectPropsOptions, PropType } from 'vue';
-
 import type { ExtractPublicPropTypes } from '../_util/interface';
-import type { Size, Type } from './interface';
+import type { Gradient, Size, Type } from './interface';
 
 export const textProps = {
     type: {
@@ -18,6 +17,9 @@ export const textProps = {
         type: String,
         default: 'span',
     },
+    gradient: {
+        type: Object as PropType<Gradient>,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type TextProps = ExtractPublicPropTypes<typeof textProps>;

components/text/text.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, h } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
 import { getSlot } from '../_util/vnode';
+import { degfy } from '../_util/utils';
 import { textProps } from './props';
 
 const prefixCls = getPrefixCls('text');
@@ -24,9 +25,22 @@ export default defineComponent({
             [`${prefixCls}-tag--mark`]: props.tag === 'mark', // 定义mark样式
         }));
 
+        const gradientStyle = computed(() => {
+            if (props.gradient && props.gradient.from && props.gradient.to) {
+                const deg = degfy(props.gradient.deg || 0);
+                return {
+                    backgroundImage: `linear-gradient(${deg}, ${props.gradient.from}, ${props.gradient.to})`,
+                    backgroundClip: 'text',
+                    textFillColor: 'transparent',
+                };
+            }
+            return {};
+        });
+
         return {
             prefixCls,
             textClass,
+            gradientStyle,
         };
     },
     render() {
@@ -35,6 +49,7 @@ export default defineComponent({
             this.tag || 'span',
             {
                 class: this.textClass,
+                style: this.gradientStyle,
             },
             children,
         );

docs/.vitepress/components/text/gradient.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <FText :gradient="gradientColor1">
+            这是渐变色的文本，角度为数值类型
+        </FText>
+    </div>
+    <div>
+        <FText :gradient="gradientColor2">
+            这是渐变色的文本，角度为字符串类型
+        </FText>
+    </div>
+    <div>
+        <FText :gradient="color">
+            这是纯色的文本
+        </FText>
+    </div>
+</template>
+
+<script setup>
+const gradientColor1 = {
+    deg: 90,
+    from: '#5384ff',
+    to: '#00cb91',
+};
+
+const gradientColor2 = {
+    deg: '90deg',
+    from: '#5384ff',
+    to: '#00cb91',
+};
+
+const color = {
+    from: '#5384ff',
+    to: '#5384ff',
+};
+</script>

docs/.vitepress/components/text/index.md

@@ -42,19 +42,34 @@ tag.vue
 mixin.vue
 :::
 
-## Text Props
+### 颜色渐变
+通过`gradient`，可以设置文字的颜色渐变，纯色则form和to保持一致即可。
 
-| 属性   | 说明                                                        | 类型    | 默认值    |
-| ------ | ----------------------------------------------------------- | ------- | --------- |
-| 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`    |
+:::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>` | `-`       |
 
 ## Text Slots
 
 | slot 名称 | 说明     |
 | --------- | -------- |
 | default   | 默认内容 |
+
+## Gradient Props 
+
+| 属性 | 说明                              | 类型          | 默认值 |
+| ---- | --------------------------------- | ------------- | ------ |
+| from | 起始颜色                          | string        | `-`    |
+| to   | 结束颜色                          | string        | `-`    |
+| deg  | 渐变角度，默认为0，即从上之下渐变 | number/string | `0`    |