Number 步进器

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-number": "wuss-weapp/w-number/index",
  3. }

图片演示

Number 步进器 - 图1

代码演示

  1. <w-pane title="Number" desc="计数器" />
  2. <w-pane desc="Default" />
  3. <w-number wuss-class="w-number" />
  4. <w-pane desc="DefaultValue = 1000" />
  5. <w-number wuss-class="w-number" defaultValue="1000" />
  6. <w-pane desc="Min = 10,Max = 100" />
  7. <w-number
  8. wuss-class="w-number"
  9. max="100"
  10. min="10"
  11. />
  12. <w-pane desc="Width = 150" />
  13. <w-number
  14. width="150"
  15. default-value="233333333"
  16. wuss-class="w-number"
  17. />
  18. <w-pane desc="Steps = 10" />
  19. <w-number
  20. default-value="100"
  21. steps="10"
  22. wuss-class="w-number"
  23. />
  24. <w-pane desc="buttonType = circle" />
  25. <w-number
  26. default-value="100"
  27. button-type="circle"
  28. wuss-class="w-number"
  29. />
  30. <w-pane desc="Fillable" />
  31. <w-number
  32. fillable="{{ false }}"
  33. default-value="100"
  34. wuss-class="w-number"
  35. />
  36. <w-pane desc="Disabled" />
  37. <w-number disabled wuss-class="w-number" />
  38. <w-pane desc="In Cell" />
  39. <w-cell-group>
  40. <block wx:for="{{ items }}" wx:key="item">
  41. <w-cell label="{{ item }}">
  42. <w-number
  43. slot="content"
  44. button-type="circle"
  45. default-value="{{ index }}"
  46. max="1000"
  47. />
  48. </w-cell>
  49. </block>
  50. </w-cell-group>
  1. data: {
  2. items: ['娃娃菜', "牛肉脯", "鸡柳", "酸菜鱼", "卤蛋", "鱼豆腐", "章鱼丸", "空心菜", "猪血", "番茄", "黄瓜", "鸭肠", "牛杂"],
  3. },
  1. .w-number {
  2. margin: 15px;
  3. }

API

Attribute 属性

属性说明类型默认值
defaultValue当前默认值number0
max最大值numberInfinity
min最小值number0
width当前输入框宽度number35
steps步进数number1
fillable是否可填写booleantrue
buttonType按钮样式,可选[box/circle]stringbox
disabled禁用booleanfalse

Event 事件

事件名说明参数
onChange改变值后的回调e.detail.value

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class根节点样式类