Price 价格组件
电商场景下的核心组件，用于规范化展示商品价格。支持金额拆分显示（整数部分大，小数部分小）、千分符、动画递增等特性。
基础用法
最基本的展示方式，默认保留两位小数并自带人民币符号。支持开启 approx 近似展示。
¥
1,234
.56
¥
1,235
1,234
.56
元
~
¥
1,234
.56
基础用法
价格区间
通过 max-value 属性轻松实现电商场景下的价格区间展示。
¥
99
.00
-
199
.00
¥
9
.90
-
12
.50
价格区间
电商高级扩展
集成了常见的会员标签、库存单位、原价对比以及酷炫的渐变文字效果。
会员价
¥
168
.00
¥
299
.00
指导价¥299.00
¥
5
.80
/ 斤
¥
8,888
.00
电商场景
多种尺寸
内置 small, default, large 三种尺寸，同时也支持通过 style 或 theme-overrides 自由控制字号与颜色。
¥
99
.00
¥
99
.00
¥
99
.00
¥
99
.00
尺寸对比
更多特性
包含划线价显示、千分符处理。
划线价：
¥
299
.00
千分符：
¥
1,234,567
.89
功能展示
在 Nuxt 中使用
YhPrice 在 Nuxt 3 中支持动态数值动画。即使在复杂数据流下也能保持极高的渲染性能。
¥
0
.00
Nuxt 集成
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 价格数值 | number | string | 0 |
| max-value | 最大价格数值 (区间模式) | number | string | undefined |
| symbol | 货币符号 | string | '¥' |
| symbol-position | 符号位置 | 'before' | 'after' | 'before' |
| precision | 小数精度 | number | 2 |
| line-through | 是否显示划线价样式 | boolean | false |
| size | 尺寸 | 'small' | 'default' | 'large' | string | 'default' |
| split | 是否将整数和小数分拆字号显示 | boolean | true |
| decimal-scale | 小数部分字号缩小比例 (0-1) | number | 0.8 |
| thousandth | 是否开启千分符 | boolean | true |
| bold | 是否加粗 | boolean | false |
| approx | 是否开启约等于符号 (~) | boolean | false |
| prefix | 前缀文本 | string | '' |
| suffix | 后缀文本 | string | '' |
| unit | 价格单位 (如 /件, /kg) | string | '' |
| delete-value | 原价 (用于划线对比展示) | number | string | undefined |
| delete-label | 原价标签 (如 吊牌价) | string | '' |
| tag | 价格标签 (如 会员价) | string | '' |
| tag-type | 标签类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'danger' |
| animated | 是否开启动态滚动动画 | boolean | false |
| gradient | 是否开启并设置渐变色 | boolean | string[] | false |
| theme-overrides | 主题变量覆盖 | object | — |
Events
当前组件未暴露组件事件。
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| prefix | 前缀插槽 | — |
| suffix | 后缀插槽 | — |
| symbol | 货币符号区域插槽 | — |
| tag | 标签区域插槽 | — |
| unit | 单位区域插槽 | — |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-price-color | 价格主色 | var(--yh-color-danger) |
--yh-price-font-family | 价格字体族 | var(--yh-font-family) |
--yh-price-integer-size | 整数部分基础字号 | 1.25em |
--yh-price-symbol-size | 符号部分基础字号 | 0.75em |
--yh-price-decimal-scale | 小数部分字号缩放比例 | 0.8 |
--yh-price-tag-bg | 标签背景颜色 | var(--yh-color-danger) |
Expose
当前组件未暴露公开实例方法或属性。
类型导出
| 名称 | 说明 |
|---|---|
YhPriceProps | 组件 Props 类型 |
YhPriceSlots | 组件插槽类型 |
YhPriceInstance | 组件实例类型 |