From d7e7d86aeb68edb776da93cae1b90921af7191d2 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 21 Mar 2025 15:23:41 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix(badge):=20=E8=A7=A3=E5=86=B3=E4=B8=AD?= =?UTF-8?q?=E6=96=87=E5=81=8F=E4=B8=8A=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/badge/badge.scss | 11 +++-------- src/styles/variables.scss | 2 +- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index 5f904fd2f7..37ae9f41ed 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -1,6 +1,8 @@ .nut-badge { position: relative; display: inline-flex; + vertical-align: middle; + box-sizing: content-box; width: auto; &-icon { @@ -37,8 +39,7 @@ &-sup { display: inline-flex; - justify-content: center; - height: $badge-height; + text-align: center; min-width: $badge-min-width; padding: $badge-padding; box-sizing: border-box; @@ -54,12 +55,6 @@ &-number { font-family: 'JD'; - /* #ifdef harmony */ - line-height: 12px; - /* #endif */ - /* #ifndef harmony */ - line-height: 13px; - /* #endif */ } &-one { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3276b5699d..c8fe50c1eb 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1616,7 +1616,7 @@ $badge-background-color: var( $color-primary ) !default; $badge-color: var(--nutui-badge-color, $color-primary-text) !default; -$badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default; +$badge-font-size: var(--nutui-badge-font-size, 9px) !default; $badge-border: var( --nutui-badge-border, 1px solid $color-primary-text From 532e0e187236ba9507f093e6749e4ef19eaf9393 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 21 Mar 2025 18:22:42 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20css=20=E5=8F=98=E9=87=8F=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme-dark.scss | 2 ++ src/styles/theme-default.scss | 2 ++ src/styles/variables.scss | 3 ++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss index fc2d1e52dc..ee7ac42279 100644 --- a/src/styles/theme-dark.scss +++ b/src/styles/theme-dark.scss @@ -215,6 +215,8 @@ page { --nutui-font-size-26: 26px; // 字号语义化 + // 徽标文字 + --nutui-font-size-xxxs: var(--nutui-font-size-9); // 标签内文字 --nutui-font-size-xxs: var(--nutui-font-size-10); // 导购或信息密集的次要内容、辅助信息 diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss index d1e9ee607d..a80bd66250 100644 --- a/src/styles/theme-default.scss +++ b/src/styles/theme-default.scss @@ -214,6 +214,8 @@ page { --nutui-font-size-26: 26px; // 字号语义化 + // 徽标文字 + --nutui-font-size-xxxs: var(--nutui-font-size-9); // 标签内文字 --nutui-font-size-xxs: var(--nutui-font-size-10); // 导购或信息密集的次要内容、辅助信息 diff --git a/src/styles/variables.scss b/src/styles/variables.scss index c8fe50c1eb..c4e9d80d8d 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -147,6 +147,7 @@ $font-family: sans-serif !default; // Font +$font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; $font-size-xxs: var(--nutui-font-size-xxs, 10px) !default; $font-size-xs: var(--nutui-font-size-xs, 11px) !default; $font-size-s: var(--nutui-font-size-s, 12px) !default; @@ -1616,7 +1617,7 @@ $badge-background-color: var( $color-primary ) !default; $badge-color: var(--nutui-badge-color, $color-primary-text) !default; -$badge-font-size: var(--nutui-badge-font-size, 9px) !default; +$badge-font-size: var(--nutui-badge-font-size, $font-size-xxxs) !default; $badge-border: var( --nutui-badge-border, 1px solid $color-primary-text From a9e16bc7eb35ccefcac25189a5a82ed18736c8fe Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 14 Aug 2025 16:29:47 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2&=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=8E=9F=E6=A0=B7=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/price/demo.taro.tsx | 12 +++++ src/packages/price/demo.tsx | 10 +++++ src/packages/price/demos/h5/demo10.tsx | 22 ++++++++++ src/packages/price/demos/h5/demo11.tsx | 22 ++++++++++ src/packages/price/demos/taro/demo10.tsx | 22 ++++++++++ src/packages/price/demos/taro/demo11.tsx | 22 ++++++++++ src/packages/price/price.taro.tsx | 56 +++++++++++++++++------- src/packages/price/price.tsx | 56 +++++++++++++++++------- src/types/spec/price/base.ts | 10 ++++- 9 files changed, 196 insertions(+), 36 deletions(-) create mode 100644 src/packages/price/demos/h5/demo10.tsx create mode 100644 src/packages/price/demos/h5/demo11.tsx create mode 100644 src/packages/price/demos/taro/demo10.tsx create mode 100644 src/packages/price/demos/taro/demo11.tsx diff --git a/src/packages/price/demo.taro.tsx b/src/packages/price/demo.taro.tsx index e3e92ebfcd..028e4ee45c 100644 --- a/src/packages/price/demo.taro.tsx +++ b/src/packages/price/demo.taro.tsx @@ -12,6 +12,8 @@ import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' import Demo9 from './demos/taro/demo9' +import Demo10 from './demos/taro/demo10' +import Demo11 from './demos/taro/demo11' const PriceDemo = () => { const [translated] = useTranslate({ @@ -25,6 +27,8 @@ const PriceDemo = () => { title7: '不展示 symbol 符号', title8: '划线价', title9: '场域分类：原子级、模块级、列表级、页面级', + title10: '自定义颜色', + title11: '数据原样输出', }, 'zh-TW': { title1: '支持尺寸：small、normal、large、xlarge', @@ -36,6 +40,8 @@ const PriceDemo = () => { title7: '不展示 symbol 符號', title8: '劃線價', title9: '場域分類：原子級、模塊級、列表級、頁面級', + title10: '自定義顏色', + title11: '數據原樣輸出', }, 'en-US': { title1: 'Support sizes：small、normal、large、xlarge', @@ -48,6 +54,8 @@ const PriceDemo = () => { title7: 'Do not display symbol', title8: 'Line-through price', title9: 'Field classification: atomic, module, list, page', + title10: 'Custom color', + title11: 'Data original output', }, }) return ( @@ -72,6 +80,10 @@ const PriceDemo = () => { {translated.title8} + {translated.title10} + + {translated.title11} + ) diff --git a/src/packages/price/demo.tsx b/src/packages/price/demo.tsx index 4b4f672e29..a135a12c4d 100644 --- a/src/packages/price/demo.tsx +++ b/src/packages/price/demo.tsx @@ -9,6 +9,8 @@ import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' import Demo9 from './demos/h5/demo9' +import Demo10 from './demos/h5/demo10' +import Demo11 from './demos/h5/demo11' const PriceDemo = () => { const [translated] = useTranslate({ @@ -22,6 +24,8 @@ const PriceDemo = () => { title7: '不展示 symbol 符号', title8: '划线价', title9: '场域分类：原子级、模块级、列表级、页面级', + title10: '自定义颜色', + title11: '数据原样输出', }, 'zh-TW': { title1: '支持尺寸：small、normal、large、xlarge', @@ -45,6 +49,8 @@ const PriceDemo = () => { title7: 'Do not display symbol', title8: 'Line-through price', title9: 'Field classification: atomic, module, list, page', + title10: 'Custom color', + title11: 'Data original output', }, }) @@ -68,6 +74,10 @@ const PriceDemo = () => {

{translated.title8}

+

{translated.title10}

+ +

{translated.title11}

+ ) } diff --git a/src/packages/price/demos/h5/demo10.tsx b/src/packages/price/demos/h5/demo10.tsx new file mode 100644 index 0000000000..bee08afa1f --- /dev/null +++ b/src/packages/price/demos/h5/demo10.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' + +const Demo10 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo10 diff --git a/src/packages/price/demos/h5/demo11.tsx b/src/packages/price/demos/h5/demo11.tsx new file mode 100644 index 0000000000..3dbff463dd --- /dev/null +++ b/src/packages/price/demos/h5/demo11.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' + +const Demo11 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo11 diff --git a/src/packages/price/demos/taro/demo10.tsx b/src/packages/price/demos/taro/demo10.tsx new file mode 100644 index 0000000000..9bc006d177 --- /dev/null +++ b/src/packages/price/demos/taro/demo10.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' + +const Demo10 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo10 diff --git a/src/packages/price/demos/taro/demo11.tsx b/src/packages/price/demos/taro/demo11.tsx new file mode 100644 index 0000000000..226220b013 --- /dev/null +++ b/src/packages/price/demos/taro/demo11.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' + +const Demo11 = () => { + return ( + + + + + + + + + + + + + + + ) +} +export default Demo11 diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index a49c31c08c..bf8bcd4f1b 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -1,9 +1,9 @@ -import React, { FunctionComponent } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import { Text, View } from '@tarojs/components' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' -import { TaroPriceProps } from '@/types' +import { TaroPriceProps, PriceColorEnum } from '@/types' import { harmony } from '@/utils/taro/platform' const defaultProps = { @@ -38,6 +38,19 @@ export const Price: FunctionComponent> = (props) => { const rtl = useRtl() + const isCustomPriceColor = useMemo(() => { + const specificPriceColor = Object.values(PriceColorEnum) + return !specificPriceColor.includes(color as PriceColorEnum) + }, [color]) + + const priceColorStyle = useMemo(() => { + return isCustomPriceColor + ? { + color, + } + : {} + }, [isCustomPriceColor, color]) + const replaceSpecialChar = (url: string) => { url = url.replace(/"/g, '"') url = url.replace(/&/g, '&') @@ -56,9 +69,9 @@ export const Price: FunctionComponent> = (props) => { if (Number(num) === 0) { num = 0 } - num = num.toString() if (checkPoint(num)) { + num = num.toString() num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] } @@ -74,17 +87,20 @@ export const Price: FunctionComponent> = (props) => { } if (checkPoint(decimalNum)) { - decimalNum = Number(decimalNum).toFixed(digits) + decimalNum = digits ? Number(decimalNum).toFixed(digits) : `${decimalNum}` decimalNum = typeof decimalNum.split('.') === 'string' ? 0 - : decimalNum.split('.')[1] || 0 + : decimalNum.split('.')[1] || '' } else { - decimalNum = 0 + decimalNum = '' } - const result = `0.${decimalNum}` - const resultFixed = Number(result).toFixed(digits) - return String(resultFixed).substring(2, resultFixed.length) + if (digits) { + const result = `0.${decimalNum}` + const resultFixed = Number(result).toFixed(digits) + return String(resultFixed).substring(2, resultFixed.length) + } + return decimalNum } const renderSymbol = () => { @@ -98,6 +114,7 @@ export const Price: FunctionComponent> = (props) => { [`${classPrefix}-rtl`]: rtl, }, ])} + style={priceColorStyle} > {symbol ? replaceSpecialChar(symbol) : ''} @@ -111,22 +128,27 @@ export const Price: FunctionComponent> = (props) => { className={`${classPrefix}-integer ${classPrefix}-integer-${size} ${ line ? `${classPrefix}-line` : '' }`} + style={priceColorStyle} > {formatThousands(price)} - {digits ? ( + {digits !== 0 ? ( <> + {checkPoint(price) || digits ? ( + + . + + ) : null} - . - - {formatDecimal(price)} diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index 9773f8685b..eb1eff0104 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -1,8 +1,8 @@ -import React, { FunctionComponent } from 'react' +import React, { FunctionComponent, useMemo } from 'react' import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index' -import { WebPriceProps } from '@/types' +import { WebPriceProps, PriceColorEnum } from '@/types' const defaultProps = { ...ComponentDefaults, @@ -37,6 +37,19 @@ export const Price: FunctionComponent> = (props) => { const rtl = useRtl() + const isCustomPriceColor = useMemo(() => { + const specificPriceColor = Object.values(PriceColorEnum) + return !specificPriceColor.includes(color as PriceColorEnum) + }, [color]) + + const priceColorStyle = useMemo(() => { + return isCustomPriceColor + ? { + color, + } + : {} + }, [isCustomPriceColor, color]) + const checkPoint = (price: string | number) => { return String(price).indexOf('.') > 0 } @@ -62,17 +75,20 @@ export const Price: FunctionComponent> = (props) => { } if (checkPoint(decimalNum)) { - decimalNum = Number(decimalNum).toFixed(digits) + decimalNum = digits ? Number(decimalNum).toFixed(digits) : `${decimalNum}` decimalNum = typeof decimalNum.split('.') === 'string' ? 0 - : decimalNum.split('.')[1] || 0 + : decimalNum.split('.')[1] || '' } else { - decimalNum = 0 + decimalNum = '' } - const result = `0.${decimalNum}` - const resultFixed = Number(result).toFixed(digits) - return String(resultFixed).substring(2, resultFixed.length) + if (digits) { + const result = `0.${decimalNum}` + const resultFixed = Number(result).toFixed(digits) + return String(resultFixed).substring(2, resultFixed.length) + } + return decimalNum } const renderSymbol = () => { @@ -86,6 +102,7 @@ export const Price: FunctionComponent> = (props) => { [`${classPrefix}-rtl`]: rtl, }, ])} + style={priceColorStyle} dangerouslySetInnerHTML={{ __html: symbol || '' }} /> ) @@ -93,7 +110,7 @@ export const Price: FunctionComponent> = (props) => { return (
@@ -102,22 +119,27 @@ export const Price: FunctionComponent> = (props) => { className={`${classPrefix}-integer ${classPrefix}-integer-${size} ${ line ? `${classPrefix}-line` : '' }`} + style={priceColorStyle} > {formatThousands(price)}
- {digits ? ( + {digits !== 0 ? ( <> + {checkPoint(price) || digits ? ( +
+ . +
+ ) : null}
- . -
-
{formatDecimal(price)}
diff --git a/src/types/spec/price/base.ts b/src/types/spec/price/base.ts index b21128bf71..82d67de4b3 100644 --- a/src/types/spec/price/base.ts +++ b/src/types/spec/price/base.ts @@ -2,13 +2,19 @@ import { BaseProps } from '../../base/props' import { SimpleValue, UISize } from '../../base/atoms' export type PriceSize = Exclude -export type PriceColor = 'primary' | 'gray' | 'darkgray' +export type SpecificPriceColor = 'primary' | 'gray' | 'darkgray' +export type PriceColor = SpecificPriceColor | string +export enum PriceColorEnum { + Primary = 'primary', + Gray = 'gray', + Darkgray = 'darkgray', +} export interface BasePrice extends BaseProps { color: PriceColor price: SimpleValue symbol: string - digits: number + digits: number | null thousands: boolean position: string size: PriceSize From 4e9f2fd19ca3bc287c829f7d8c1e4f068303709c Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 14 Aug 2025 16:41:47 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat(price):=20=E4=BB=B7=E6=A0=BC=E5=87=80?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/price/price.taro.tsx | 6 +++++- src/packages/price/price.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index bf8bcd4f1b..04eef72ced 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -20,7 +20,7 @@ const defaultProps = { export const Price: FunctionComponent> = (props) => { const { color, - price, + price: originalPrice, symbol, digits, thousands, @@ -38,6 +38,10 @@ export const Price: FunctionComponent> = (props) => { const rtl = useRtl() + const price = useMemo(() => { + return originalPrice.toString().replace(/[^\d.]/g, '') + }, [originalPrice]) + const isCustomPriceColor = useMemo(() => { const specificPriceColor = Object.values(PriceColorEnum) return !specificPriceColor.includes(color as PriceColorEnum) diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index eb1eff0104..3763ad0a49 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -18,7 +18,7 @@ const defaultProps = { export const Price: FunctionComponent> = (props) => { const { color, - price, + price: originalPrice, symbol, digits, thousands, @@ -37,6 +37,10 @@ export const Price: FunctionComponent> = (props) => { const rtl = useRtl() + const price = useMemo(() => { + return originalPrice.toString().replace(/[^\d.]/g, '') + }, [originalPrice]) + const isCustomPriceColor = useMemo(() => { const specificPriceColor = Object.values(PriceColorEnum) return !specificPriceColor.includes(color as PriceColorEnum) From a761bbbfb8c8e247c8f906b097b549750c5535ca Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 14 Aug 2025 16:53:58 +0800 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=E6=96=87=E6=A1=A3=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/price/doc.en-US.md | 28 ++++++++++++++++++++++------ src/packages/price/doc.md | 20 ++++++++++++++++++-- src/packages/price/doc.taro.md | 27 ++++++++++++++++++++++----- src/packages/price/doc.zh-TW.md | 26 +++++++++++++++++++++----- 4 files changed, 83 insertions(+), 18 deletions(-) diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index 5f5bd6a92e..62981b1732 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -82,19 +82,35 @@ import { Price } from '@nutui/nutui-react' ::: +### Custom color + +:::demo + + + +::: + +### Data original output + +:::demo + + + +::: + ## Price ### Props | Property | Description | Type | Default | | --- | --- | --- | --- | -| color | Price type | `primary` \| `gray` \| `darkgray` | `primary` | +| color | Price type, supports custom colors | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | -| digits | Decimal digits | `number` | `2` | +| digits | Decimal digits, pass `null` for original data output | `number` \| `null` | `2` | | thousands | Thousands separation | `boolean` | `false` | | position | The symbol appear before or after the price，`before`、`after` | `string` | `before` | -| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` | +| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | Line-through price | `boolean` | `false` | ## Theming @@ -105,9 +121,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-price-primary-color | Text color when type is primary | `#ff0f23` | -| \--nutui-price-color | Text color when type is gray | `#888b94` | -| \--nutui-price-darkgray-color | Text color when type is darkgray | `#1a1a1a` | +| \--nutui-price-primary-color | Text color when color is primary | `#ff0f23` | +| \--nutui-price-color | Text color when color is gray | `#888b94` | +| \--nutui-price-darkgray-color | Text color when color is darkgray | `#1a1a1a` | | \--nutui-price-line-color | Underline price color | `#888b94` | | \--nutui-price-symbol-padding-right | Right padding of symbol | `0px` | | \--nutui-price-symbol-xlarge-size | xlarge size symbol font size | `12px` | diff --git a/src/packages/price/doc.md b/src/packages/price/doc.md index 69a0dd5a06..56daa10866 100644 --- a/src/packages/price/doc.md +++ b/src/packages/price/doc.md @@ -82,16 +82,32 @@ import { Price } from '@nutui/nutui-react' ::: +### 自定义颜色 + +:::demo + + + +::: + +### 数据原样输出 + +:::demo + + + +::: + ## Price ### Props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| color | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 价格类型, 支持自定义颜色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | | price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | -| digits | 小数位位数 | `number` | `2` | +| digits | 小数位位数，传入`null`数据原样输出 | `number` \| `null` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | | size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | diff --git a/src/packages/price/doc.taro.md b/src/packages/price/doc.taro.md index 9b9032ad3e..a61fea1bbd 100644 --- a/src/packages/price/doc.taro.md +++ b/src/packages/price/doc.taro.md @@ -82,15 +82,32 @@ import { Price } from '@nutui/nutui-react-taro' ::: +### 自定义颜色 + +:::demo + + + +::: + +### 数据原样输出 + +:::demo + + + +::: + ## Price ### Props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 价格类型, 支持自定义颜色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | +| price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | -| digits | 小数位位数 | `number` | `2` | +| digits | 小数位位数，传入`null`数据原样输出 | `number` \| `null` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | | size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | @@ -104,9 +121,9 @@ import { Price } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | -| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | -| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-primary-color | color为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | color为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | color为darkgray时文字颜色 | `#1a1a1a` | | \--nutui-price-line-color | 划线价颜色 | `#888b94` | | \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | | \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | diff --git a/src/packages/price/doc.zh-TW.md b/src/packages/price/doc.zh-TW.md index 898ee311eb..3b48215736 100644 --- a/src/packages/price/doc.zh-TW.md +++ b/src/packages/price/doc.zh-TW.md @@ -82,16 +82,32 @@ import { Price } from '@nutui/nutui-react' ::: +### 自定義顏色 + +:::demo + + + +::: + +### 數據原樣輸出 + +:::demo + + + +::: + ## Price ### Props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| color | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | +| color | 價格類型, 支持自定義顏色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` | | price | 價格數量 | `number` | `0` | | symbol | 符號類型 | `string` | `¥` | -| digits | 小數位位數 | `number` | `2` | +| digits | 小數位位數，傳入`null`數據原樣輸出 | `number` \| `null` | `2` | | thousands | 是否按照千分號形式顯示 | `boolean` | `false` | | position | 符號顯示在價格前或者後，`before`、`after` | `string` | `before` | | size | 價格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | @@ -105,9 +121,9 @@ import { Price } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-price-primary-color | type為primary時文字顏色 | `#ff0f23` | -| \--nutui-price-color | type為gray時文字顏色 | `#888b94` | -| \--nutui-price-darkgray-color | type為darkgray時文字顏色 | `#1a1a1a` | +| \--nutui-price-primary-color | color為primary時文字顏色 | `#ff0f23` | +| \--nutui-price-color | color為gray時文字顏色 | `#888b94` | +| \--nutui-price-darkgray-color | color為darkgray時文字顏色 | `#1a1a1a` | | \--nutui-price-line-color | 劃線價顏色 | `#888b94` | | \--nutui-price-symbol-padding-right | 符號的右內邊距 | `0px` | | \--nutui-price-symbol-xlarge-size | xlarge 尺寸符號字體大小 | `12px` |