price 价格

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-price": "@retailwe/ui-price/index"
}

代码演示

基础用法

通过price属性传入金额 注意：金额的单位是分，即100代表1元

<price price="{{100}}"></price>
<price price="{{10}}"></price>
<price price="{{1}}"></price>

细体 黑色 删除线 贯通删除线

<price price="{{1}}" type="lighter"></price>
<price price="{{1}}" type="mini"></price>
<price price="{{1}}" type="del"></price>
<price price="{{1}}" type="delthrough"></price>

美元 无货币符号

<price price="{{1}}" symbol="$"></price>
<price price="{{1}}" symbol=""></price>

小数部分缩小

<price price="{{1}}" decimalSmaller></price>

填充保持两位小数

<price price="{{100}}" fill></price>
<price price="{{110}}" fill></price>
<price price="{{101}}" fill></price>

使用外部样式类控制样式

<price
  price="{{9999}}"
  wr-class="custom-price"
  symbol-class="custom-price__symbol"
  decimal-class="custom-price__decimal"
></price>

API

wr-price Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | ---------------------- | -------- | --------- | ---- | | price | 金额，单位是分 | string|number | success | - | | type | 样式类型 |string | - | main 粗体, lighter 细体, mini 黑色, del 中划线, delthrough 中划线，包括货币符号 | | symbol | 货币符号 | string | ¥ | - | | fill | 是否始终保持两位小数 |boolean | - | - | | decimalSmaller | 缩小小数部分字号 | boolean | - | - |

外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点样式类 | | symbol-class | 货币符号样式类 | | decimal-class | 小数部分样式类 |

CSS Var

| 类名 | 说明 | 默认值 | | --------------- | -------- | ------ | | --ui-price-display | 价格布局基础 | inline-block | | --ui-price-color | 价格颜色 | - | | --ui-price-size | 价格字体大小 | - | | --ui-price-weight | 价格字体总量 | - | | --ui-price-decoration | 价格装饰线(text-decoration)设定 | - | | --ui-price-symbol-color | 价格单位颜色 | inherit | | --ui-price-symbol-size | 价格单位字体大小 | inherit | | --ui-price-pprice-margin | 价格单位右方block的margin | 0 0 0 4rpx | | --ui-price-integer-color | 价格整数颜色 | inherit | | --ui-price-integer-size | 价格整数字体大小 | inherit | | --ui-price-decimal-color | 价格浮点数颜色 | inherit | | --ui-price-decimal-size | 价格浮点数字体大小 | inherit |