@retailwe/ui-price NPM

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