@retailwe/ui-price

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

Usage no npm install needed!

<script type="module">
  import retailweUiPrice from 'https://cdn.skypack.dev/@retailwe/ui-price';
</script>

README

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="quot;></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