价格 Price

售卖商品的价格。

价格及价格符号

通过value属性设定价格。

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

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

:::img :::

示例代码

  <l-price unit="￥" value="666"></l-price>
  <l-price unit="$" value="666"></l-price>
  <l-price unit="￥" value="666~777" mode="text"></l-price>

是否为删除态价格

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

通过del-color属性设置价格删除态的颜色。

:::img :::

示例代码

  <l-price 
    unit="￥"
    value="666"
    deleted="{{true}}"
    del-color="#3963bc"
  ></l-price>

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

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

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

示例代码

  <l-price 
    unit="￥"
    value="666.00"
    autofix
    reserve-digit="2"
    unit-color="#3963bc"
    unit-size="28"
  ></l-price>

价格颜色及大小

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

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

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

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

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

TIP

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

:::img :::

示例代码

  <l-price 
    unit="￥"
    value="666"
    unit-color="#3963bc"
    unit-size="28"
  ></l-price>

价格属性

参数	说明	类型	可选值	默认值
unit	设置价格单位	String	---	￥
value	设置价格内容	String	---	---
mode	设置价格内容类型	String	number/text	text
deleted	价格是否为删除态	Boolean	---	false
reserve-digit	设置价格小数保留位数	Number	---	2
color	设置价格整体颜色	String	---	---
size	设置价格整体字体大小	String	---	---
bold	设置价格整体字体粗细	String	---	’500‘
autofix	是否开启自动补零	Boolean	---	false
del-color	删除态价格删除线颜色	String	---	---
value-color	设置价格数字颜色	String	---	---
unit-color	设置价格单位颜色	String	---	---
value-size	设置价格数字大小（单位rpx）	Number	---	28
unit-size	设置价格单位大小（单位rpx）	Number	---	28
unit-bold	设置价格单位字体粗细	Number/String	---	--
value-bold	设置价格字体粗细	Number/String	---	--

价格外部样式类

外部样式类名	说明	备注
l-class	覆盖价格部分的外部样式类	---
l-unit-class	覆盖价格单位的外部样式类	---
l-value-class	覆盖价格数字部分的外部样式类	---
l-decimal-class	覆盖价格小数部分的外部样式类	---
l-dot-class	覆盖价格小数点的外部样式类	---