价格 Price

基础用法

价格及价格符号

通过 value 属性设定价格。

通过 unit 属性设置价格单位。默认值为￥。

通过 mode 属性设置价格类型，可选值为 number、text，默认值为 number。

通过color属性设置价格的颜色。

￥666

$666

￥666~777

▼ 显示代码

是否为删除态价格

通过deleted属性设置价格是否为删除态。默认值为false。

￥666

▼ 显示代码

价格小数保留位数及自动补零

通过reserve-digit属性设置价格小数保留的位数。默认保留 2 位小数。

通过autofix属性设置自动补零。例如设置value为666.00，默认显示为666，开启自动补零可正常显示。

￥666.00

▼ 显示代码

价格颜色及大小

通过color、size、bold属性设置价格整体的颜色、大小及字体粗细。

通过unit-size属性设置价格单位的大小。

通过unit-color属性设置价格单位的颜色。

通过value-size属性设置价格的大小。

通过value-color属性设置价格的颜色。

TIP

color、size、bold可以被unit-size等属性覆盖。

￥666

￥666

￥666

▼ 显示代码

API

Props

参数	说明	类型	可选值	默认值
unit	设置价格单位	String	——	￥
value	设置价格内容	String	——	0.00
mode	设置价格内容类型	String	number/text	text
deleted	价格是否为删除态	Boolean	——	false
reserveDigit	设置价格小数保留位数	Number	——	2
color	设置价格整体颜色	String	——	#3963BC
size	设置价格整体字体大小	String	——	14
bold	设置价格整体字体粗细	String	——	500
autofix	是否开启自动补零	Boolean	——	false
delColor	删除态价格删除线颜色	String	——	——
valueColor	设置价格数字颜色	String	——	——
unitColor	设置价格单位颜色	String	——	——
valueSize	设置价格数字大小（单位px）	String	——	14
unitSize	设置价格数字大小（单位px）	String	——	——
valueBold	设置价格单位字体粗细	String	——	——
unitBold	设置价格单位字体粗细	String	——	——

价格外部样式类

类名	说明
customClass	设置价格整体容器的外部样式类
unitClass	覆盖价格单位的外部样式类
valueClass	覆盖价格数字部分的外部样式类