Price 价格展示

商品价格格式化展示,支持货币符号、小数位、千分位、删除线

商品价格格式化展示,支持货币符号、小数位、千分位、删除线

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-price class="demo-price-default" :price="99" />
  <re-price class="demo-price-zero" :price="0" />
  <re-price class="demo-price-large" :price="9999" />

<!-- 货币符号 -->
  <re-price class="demo-price-yuan" :price="99" symbol="¥" />
  <re-price class="demo-price-dollar" :price="99" symbol="$" />
  <re-price class="demo-price-no-symbol" :price="99" symbol="" />

<!-- 小数位 -->
  <re-price class="demo-price-decimal-0" :price="99.99" :decimalDigits="0" />
  <re-price class="demo-price-decimal-1" :price="99.99" :decimalDigits="1" />
  <re-price class="demo-price-decimal-2" :price="99.99" :decimalDigits="2" />

<!-- 千分位 -->
  <re-price class="demo-price-thousands" :price="9999999" :thousands="true" />
  <re-price class="demo-price-no-thousands" :price="9999999" :thousands="false" />

<!-- 删除线 -->
  <re-price class="demo-price-strikethrough" :price="199" :strikethrough="true" />
  <re-price class="demo-price-no-strikethrough" :price="199" :strikethrough="false" />

<!-- 自定义样式 -->
  <re-price class="demo-price-custom-style" :price="99" customStyle="color: #e34d59; font-size: 20px;" />

<!-- 组合用法 -->
  <re-price class="demo-price-current" :price="99" symbol="¥" :decimalDigits="2" />
  <re-price class="demo-price-original" :price="199" symbol="¥" :strikethrough="true" customStyle="color: #999; font-size: 14px;" />

<!-- 大额价格 -->
  <re-price class="demo-price-million" :price="1000000" :thousands="true" />
  <re-price class="demo-price-billion" :price="9999999" :thousands="true" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-price />。

API

Price Props

名称类型默认值描述必传
pricenumber0价格数值N
symbolstring"¥"货币符号N
decimalDigitsnumber2小数位数N
thousandsbooleanfalse是否显示千分位N
sizestring"16px"字体大小N
colorstring""颜色N
strikeThroughbooleanfalse是否显示删除线N
customStylestring""自定义样式N

Price Events

名称参数描述
---

Price Slots

名称描述
--