- 价格 Price
- 价格及价格符号
- 示例代码
- 是否为删除态价格
- 示例代码
- 价格颜色及大小
- 示例代码
- 价格前后内容设置
- 价格属性(Price Attributes)
- 价格及价格符号
价格 Price
售卖商品的价格。
价格及价格符号
通过count
属性设定价格。
通过unit
属性设置价格单位。默认值为¥
。
示例代码
<l-price
unit="¥"
count="666"
></l-price>
是否为删除态价格
通过delete
属性设置价格是否为删除态。默认值为false
。
通过del-color
属性设置价格删除态的颜色。
示例代码
<l-price
unit="¥"
count="666"
delete="{{true}}"
del-color="#3963bc"
></l-price>
价格颜色及大小
通过unit-size
属性设置价格单位的大小。
通过unit-color
属性设置价格单位的颜色。
通过count-size
属性设置价格的大小。
通过count-color
属性设置价格的颜色。
示例代码
<l-price
unit="¥"
count="666"
unit-color="#3963bc"
unit-size="28"
></l-price>
价格前后内容设置
通过设置slot='before'
插入价格前的内容。
通过设置slot='after'
插入价格前的内容。
<l-price
unit="¥"
count="666"
unit-color="#3963bc"
unit-size="28"
>
<l-tag slot="before">VIP</l-tag>
</l-price>
TIP
del-color
属性权重大于unit-color
和count-color
属性。unit-color
和count- color
属性之间无冲突,可单独设置。
价格属性(Price Attributes)
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
unit | 设置价格单位 | String | —- | ¥ |
count | 设置价格数字 | Number | —- | —- |
delete | 价格是否为删除态 | Boolean | —- | false |
del-color | 删除态价格删除线颜色 | String | —- | —- |
count-color | 设置价格数字颜色 | String | —- | —- |
unit-color | 设置价格单位颜色 | String | —- | —- |
count-size | 设置价格数字大小(单位rpx) | Number | —- | 28 |
unit-size | 设置价格单位大小(单位rpx) | Number | —- | 28 |
unit-blod | 设置价格单位字体粗细 | Number/String | —- | — |
count-blod | 设置价格字体粗细 | Number/String | —- | — |
l-class | 覆盖价格部分的外部样式类 | String | —- | —- |
l-unit-class | 覆盖价格单位的外部样式类 | String | —- | —- |
l-count-class | 覆盖价格数字部分的外部样式类 | String | —- | —- |