fix(countup): 分隔符文字颜色支持css变量修改

irisSong · irisSong · commit 22d4c620154d · 2024-12-18T10:02:30.000+08:00
diff --git a/src/packages/animatingnumbers/countup.scss b/src/packages/animatingnumbers/countup.scss
@@ -25,7 +25,7 @@
     display: flex;
     height: 80%;
     align-items: flex-end;
-    color: $countup-bg-color;
+    color: $countup-separator-color;
   }
 
   &-number {
diff --git a/src/packages/animatingnumbers/demos/h5/demo2.tsx b/src/packages/animatingnumbers/demos/h5/demo2.tsx
@@ -7,6 +7,7 @@ const Demo2 = () => {
     nutuiCountupBgColor: `var(--nutui-color-primary)`,
     nutuiCountupColor: `#fff`,
     nutuiCountupLrMargin: `1px`,
+    nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
   }
   const [value, setEndNumer] = useState('1570.99')
   useEffect(() => {
diff --git a/src/packages/animatingnumbers/demos/taro/demo2.tsx b/src/packages/animatingnumbers/demos/taro/demo2.tsx
@@ -7,6 +7,7 @@ const Demo2 = () => {
     nutuiCountupBgColor: `var(--nutui-color-primary)`,
     nutuiCountupColor: `#fff`,
     nutuiCountupLrMargin: `1px`,
+    nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
   }
   const [value, setEndNumer] = useState('1570.99')
   useEffect(() => {
diff --git a/src/packages/animatingnumbers/doc.en-US.md b/src/packages/animatingnumbers/doc.en-US.md
@@ -53,3 +53,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-countup-lr-margin | margin of item | `0` |
 | \--nutui-countup-bg-color | background color of item | `inherit` |
 | \--nutui-countup-color | color of item | `$color-title` |
+| \--nutui-countup-separator-color | The font color of the separator | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.md b/src/packages/animatingnumbers/doc.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
 | \--nutui-countup-lr-margin | 每个数字的margin | `0` |
 | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
 | \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.taro.md b/src/packages/animatingnumbers/doc.taro.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react-taro'
 | \--nutui-countup-lr-margin | 每个数字的margin | `0` |
 | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
 | \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.zh-TW.md b/src/packages/animatingnumbers/doc.zh-TW.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
 | \--nutui-countup-lr-margin | 每個數字的margin | `0` |
 | \--nutui-countup-bg-color | 每個數字塊的背景色 | `inherit` |
 | \--nutui-countup-color | 每個數字塊的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字體顏色 | `$color-title` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -2291,6 +2291,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
+$countup-separator-color: var(
+  --nutui-countup-separator-color,
+  $color-title
+) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`display: flex;`
`26`	`26`	`height: 80%;`
`27`	`27`	`align-items: flex-end;`
`28`		`- color: $countup-bg-color;`
	`28`	`+ color: $countup-separator-color;`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`&-number {`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ const Demo2 = () => {`
`7`	`7`	nutuiCountupBgColor: `var(--nutui-color-primary)`,
`8`	`8`	nutuiCountupColor: `#fff`,
`9`	`9`	nutuiCountupLrMargin: `1px`,
	`10`	+ nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
`10`	`11`	`}`
`11`	`12`	`const [value, setEndNumer] = useState('1570.99')`
`12`	`13`	`useEffect(() => {`