更新记录

1.1.0（2026-10-28） 下载此版本

• 重构为完整的价格标签组件，拆分为「货币符号 + 整数 + 小数」三段渲染，符号与小数位自动缩小字号
• 新增常见货币符号字典，symbol 支持 ISO 4217 代码（CNY / USD / EUR / HKD ...）、中文名（人民币 / 美元 ...）与原始符号三种写法
• price 支持 String 与 Number，并容错带千分位逗号的字符串、科学计数法、空值与非数字文本（如「面议」原样输出）
• 实现 decimal-digits（固定小数位、自动补零）、thousands（千分位）、rounding（按位四舍五入）三项格式化能力
• 新增 size 字号配置（内置 xs ~ xxxl 或数字 rpx）
• color 支持传入自定义 css 类，也可直接传色值

平台兼容性

uni-app(3.99)

uni-app x(3.99)

其他

o-price

价格标签组件，把「价格」按中文电商习惯渲染成 符号 + 整数 + 小数 的三段式结构，支持千分位、小数位控制、四舍五入，以及常见货币符号。

Props

decimal-digits 缺省时原样保留小数，例如 12.50 显示为 12.50；设了 2 则固定两位并补零。 rounding 与 decimal-digits 配合使用时按位四舍五入，rounding 单独使用时按 2 位（分）处理。

货币符号

symbol 支持三种写法，优先级：货币代码 > 中文名 > 原始符号：

中文名同样可用：人民币、美元、欧元、英镑、日元、韩元、港币、澳门元、新台币、新加坡元、澳元、加元、卢布、卢比、泰铢、越南盾、比索、林吉特、印尼盾、雷亚尔、里拉、兰特。 字典里没有的值会按原样输出，所以直接写 symbol="US$" 也没问题。

示例

<!-- 基础 -->
<o-price :price="99.9"></o-price>

<!-- 美元 + 千分位 + 两位小数 -->
<o-price :price="1234567.891" symbol="USD" thousands :decimal-digits="2"></o-price>

<!-- 四舍五入到分，红色大字 -->
<o-price :price="29.995" :decimal-digits="2" rounding size="xl" color="text-red"></o-price>

<!-- 只要数字，不要符号 -->
<o-price :price="128" :show-symbol="false"></o-price>

补充说明

• 组件根节点是 text，display: inline-block，可以与普通文字、其他标签混排在一行。
• 符号、整数、小数分三段渲染并分别缩放字号（符号 0.72em、小数 0.78em），只改 size 即可整体放大缩小。
• 小程序端开启了 virtualHost，组件本身不产生额外节点，因此挂在 <o-price> 上的 class、style 可能不生效，需要间距时请在父级容器上处理；color 传入的类名（如 text-red）依靠 styleIsolation: apply-shared 正常生效。
• 传入空值显示 0；传入无法解析为数字的内容（如「面议」「--」）则原样输出，不做格式化。