fix: 处理text组件渐变样式失效的问题 (#785)

Co-authored-by: blankzhang <blankzhang@blankzhangdeMac-mini.local>
WeBankFinTech · Apr 29, 2024 · b16fb4a · b16fb4a
1 parent a620cf8
commit b16fb4a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/components/text/style/index.less b/components/text/style/index.less
@@ -54,4 +54,10 @@
         --f-text-text-color: @text-color-tag-mark;
         background:var(--f-hover-color-light) ;
     }
+
+    &-gradient {
+        -webkit-background-clip:text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
 }
diff --git a/components/text/text.tsx b/components/text/text.tsx
@@ -16,22 +16,25 @@ export default defineComponent({
     setup(props) {
         useTheme();
 
+        const isGradient = computed(() => {
+            return props.gradient && props.gradient.from && props.gradient.to;
+        });
+
         const textClass = computed(() => ({
             [prefixCls]: true,
             [`${prefixCls}-type--${props.type}`]: props.type,
             [`${prefixCls}-size--${props.size}`]: props.size,
             [`${prefixCls}-text--strong`]: props.strong,
             [`${prefixCls}-text--italic`]: props.italic,
             [`${prefixCls}-tag--mark`]: props.tag === 'mark', // 定义mark样式
+            [`${prefixCls}-gradient`]: isGradient.value,
         }));
 
         const gradientStyle = computed(() => {
-            if (props.gradient && props.gradient.from && props.gradient.to) {
+            if (isGradient.value) {
                 const deg = degfy(props.gradient.deg || 0);
                 return {
                     backgroundImage: `linear-gradient(${deg}, ${props.gradient.from}, ${props.gradient.to})`,
-                    backgroundClip: 'text',
-                    textFillColor: 'transparent',
                 };
             }
             return {};