wxc-price

MinUI 小程序组件 - 价格

Install

  1. $ min install @minui/wxc-price

Demos

默认姿势

价格 price - 图1

  1. <template>
  2.   <wxc-price>70.00</wxc-price>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-price': '@minui/wxc-price'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style></style>

删除态

价格 price - 图2

  1. <template>
  2.   <wxc-price status="del" del-color="#666">140.00</wxc-price>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-price': '@minui/wxc-price'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18. </style>

保留一位小数

仅对 value 传值有效

价格 price - 图3

  1. <template>
  2.   <wxc-price value="70.68" decimal="1"></wxc-price>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-price': '@minui/wxc-price'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18. </style>

价格取整

仅对 value 传值有效

价格 price - 图4

  1. <template>
  2.   <wxc-price value="70.68" decimal="none"></wxc-price>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-price': '@minui/wxc-price'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18. </style>

小数部分字号缩小

价格 price - 图5

  1. <template>
  2.   <wxc-price class="price-demo"
  3.              value="39.00" decimal="small"></wxc-price>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-price': '@minui/wxc-price'
  11.     }
  12.   },
  13.   data: {},
  14.   methods: {}
  15. }
  16. </script>
  18. <style>
  19.   .price-demo {
  20.     font-size: 36rpx;
  21.     font-weight: bold;
  22.     color: #ff4422;
  23.   }
  24. </style>

价格符号居下

价格 price - 图6

  1. <template>
  2.   <wxc-price class="price-demo"
  3.              icon="sub">100.02</wxc-price>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-price': '@minui/wxc-price'
  11.     }
  12.   },
  13.   data: {},
  14.   methods: {}
  15. }
  16. </script>
  18. <style>
  19.   .price-demo {
  20.     font-size: 36rpx;
  21.     font-weight: bold;
  22.     color: #ff4422;
  23.   }
  24. </style>

价格符号居上

价格 price - 图7

  1. <template>
  2.   <wxc-price class="price-demo"
  3.              icon="sup">70.00</wxc-price>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-price': '@minui/wxc-price'
  11.     }
  12.   },
  13.   data: {},
  14.   methods: {}
  15. }
  16. </script>
  18. <style>
  19.   .price-demo {
  20.     font-size: 36rpx;
  21.     font-weight: bold;
  22.     color: #ff4422;
  23.   }
  24. </style>

设置货币符号

设置为美元

价格 price - 图8

  1. <template>
  2.     <wxc-price symbol="$">70.00</wxc-price>
  3. </template>
  5. <script>
  6.     export default {
  7.         config: {
  8.             usingComponents: {
  9.                 'wxc-price': '@minui/wxc-price'
  10.             }
  11.         },
  12.         data: {},
  13.         methods: {}
  14.     }
  15. </script>
  17. <style></style>

value 传值

优先级高于标签内嵌套值

价格 price - 图9

  1. <template>
  2.   <wxc-price value="70.00"></wxc-price>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-price': '@minui/wxc-price'
  10.     }
  11.   },
  12.   data: {},
  13.   methods: {}
  14. }
  15. </script>
  17. <style>
  18. </style>

API

Price【props】

属性描述
value[可选] 价格数值，优先级高于标签内嵌套值
symbol[可选] 货币符号。默认为 ￥
status[可选] 显示状态，若设置为 del 显示为删除态
icon[可选] 人民币符号显示规则 - 如不设置，人民币符号的字号同价格数字一致 - 设为 sup，人民币符号字号缩小，位于价格左上方 - 设为 sub，人民币符号字号缩小，位于价格左下方
decimal[可选] 小数部分显示规则 - 如不设置，显示 2 位小数，字号同整数部分一致 - 设置为 1，显示 1 位小数，小数部分向下取整 - 设为 none，不显示小数部分，只显示整数价格 - 设为 small，小数部分字号缩小
del-color[可选] del 状态下文字颜色，只在del状态下有效，正常状态下文字颜色可继承父元素 - 默认 #999
地址
price 组件文档 https://meili.github.io/min/docs/minui/index.html#price
price 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-price
MinUI 组件库 https://github.com/meili/minui

Preview

price

ChangeLog

v1.0.6（2018.01.09)

  • 增加货币符号属性
  • del 状态下可自定义文字颜色

v1.0.3（2018.01.04）

  • 修复保留两位小数，一位小数等问题

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本