InputNumber 数字输入框

通过鼠标或键盘，输入范围内的数值，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "InputNumber",
  3.     "usingComponents": {
  4.         "wux-cell-group": "../../dist/cell-group/index",
  5.         "wux-cell": "../../dist/cell/index",
  6.         "wux-input-number": "../../dist/input-number/index"
  7.     }
  8. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">InputNumber</view>
  4.         <view class="page__desc">数字输入框</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-cell-group title="默认">
  8.             <wux-cell title="数量" hover-class="none">
  9.                 <wux-input-number default-value="1024" slot="footer" />
  10.             </wux-cell>
  11.         </wux-cell-group>
  12.         <wux-cell-group title="主题色">
  13.             <wux-cell title="Light" hover-class="none">
  14.                 <wux-input-number color="light" slot="footer" />
  15.             </wux-cell>
  16.             <wux-cell title="Stable" hover-class="none">
  17.                 <wux-input-number color="stable" slot="footer" />
  18.             </wux-cell>
  19.             <wux-cell title="Positive" hover-class="none">
  20.                 <wux-input-number color="positive" slot="footer" />
  21.             </wux-cell>
  22.             <wux-cell title="Calm" hover-class="none">
  23.                 <wux-input-number color="calm" slot="footer" />
  24.             </wux-cell>
  25.             <wux-cell title="Balanced" hover-class="none">
  26.                 <wux-input-number color="balanced" slot="footer" />
  27.             </wux-cell>
  28.             <wux-cell title="Energized" hover-class="none">
  29.                 <wux-input-number color="energized" slot="footer" />
  30.             </wux-cell>
  31.             <wux-cell title="Assertive" hover-class="none">
  32.                 <wux-input-number color="assertive" slot="footer" />
  33.             </wux-cell>
  34.             <wux-cell title="Royal" hover-class="none">
  35.                 <wux-input-number color="royal" slot="footer" />
  36.             </wux-cell>
  37.             <wux-cell title="Dark" hover-class="none">
  38.                 <wux-input-number color="dark" slot="footer" />
  39.             </wux-cell>
  40.         </wux-cell-group>
  41.         <wux-cell-group title="圆形按钮">
  42.             <wux-cell title="Light" hover-class="none">
  43.                 <wux-input-number shape="circle" color="light" slot="footer" />
  44.             </wux-cell>
  45.             <wux-cell title="Stable" hover-class="none">
  46.                 <wux-input-number shape="circle" color="stable" slot="footer" />
  47.             </wux-cell>
  48.             <wux-cell title="Positive" hover-class="none">
  49.                 <wux-input-number shape="circle" color="positive" slot="footer" />
  50.             </wux-cell>
  51.             <wux-cell title="Calm" hover-class="none">
  52.                 <wux-input-number shape="circle" color="calm" slot="footer" />
  53.             </wux-cell>
  54.             <wux-cell title="Balanced" hover-class="none">
  55.                 <wux-input-number shape="circle" color="balanced" slot="footer" />
  56.             </wux-cell>
  57.             <wux-cell title="Energized" hover-class="none">
  58.                 <wux-input-number shape="circle" color="energized" slot="footer" />
  59.             </wux-cell>
  60.             <wux-cell title="Assertive" hover-class="none">
  61.                 <wux-input-number shape="circle" color="assertive" slot="footer" />
  62.             </wux-cell>
  63.             <wux-cell title="Royal" hover-class="none">
  64.                 <wux-input-number shape="circle" color="royal" slot="footer" />
  65.             </wux-cell>
  66.             <wux-cell title="Dark" hover-class="none">
  67.                 <wux-input-number shape="circle" color="dark" slot="footer" />
  68.             </wux-cell>
  69.         </wux-cell-group>
  70.         <wux-cell-group title="设置 callback 回调函数，在调试窗口中输出">
  71.             <wux-cell title="数量" hover-class="none">
  72.                 <wux-input-number longpress disabled="{{ false }}" value="{{ value }}" controlled min="{{ -10 }}" max="{{ 10 }}" bind:change="onChange" slot="footer" />
  73.             </wux-cell>
  74.         </wux-cell-group>
  75.         <wux-cell-group title="自定义样式">
  76.             <wux-cell title="数量" hover-class="none">
  77.                 <wux-input-number wux-sub-class="sub" wux-input-class="input" wux-add-class="add" slot="footer" />
  78.             </wux-cell>
  79.         </wux-cell-group>
  80.         <wux-cell-group title="设置步长为0.5">
  81.             <wux-cell title="数量" hover-class="none">
  82.                 <wux-input-number step="{{ .5 }}" slot="footer" />
  83.             </wux-cell>
  84.         </wux-cell-group>
  85.         <wux-cell-group title="设置值为1，最小值为-5，最大值为8">
  86.             <wux-cell title="数量" hover-class="none">
  87.                 <wux-input-number default-value="1" min="{{ -5 }}" max="{{ 8 }}" slot="footer" />
  88.             </wux-cell>
  89.         </wux-cell-group>
  90.         <wux-cell-group title="设置可输入">
  91.             <wux-cell title="数量" hover-class="none">
  92.                 <wux-input-number disabled="{{ false }}" slot="footer" />
  93.             </wux-cell>
  94.         </wux-cell-group>
  95.         <wux-cell-group title="设置长按快速加减">
  96.             <wux-cell title="数量" hover-class="none">
  97.                 <wux-input-number longpress slot="footer" />
  98.             </wux-cell>
  99.         </wux-cell-group>
  100.         <wux-cell-group title="循环输出多个组件">
  101.             <block wx:for="{{ items }}" wx:key="">
  102.                 <wux-cell title="{{ item.text }}" hover-class="none">
  103.                     <wux-input-number default-value="{{ item.value }}" slot="footer" />
  104.                 </wux-cell>
  105.             </block>
  106.         </wux-cell-group>
  107.     </view>
  108. </view>
  1. Page({
  2.     data: {
  3.         items: [{
  4.                 id: '001',
  5.                 text: '房间',
  6.                 value: 1,
  7.             },
  8.             {
  9.                 id: '002',
  10.                 text: '成人',
  11.                 value: 2,
  12.             },
  13.         ],
  14.         value: 1,
  15.     },
  16.     onChange(e) {
  17.         console.log(e)
  18.         this.setData({
  19.             value: e.detail.value,
  20.         })
  21.     },
  22. })

视频演示

InputNumber

API

InputNumber props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-input-number
min number 最小值 -Infinity
max number 最大值 Infinity
step number 计数间隔 1
defaultValue number 默认值，当 controlled 为 false 时才生效 0
value number 当前值，当 controlled 为 true 时才生效 0
controlled boolean 是否受控 说明文档 false
disabled boolean 是否禁用输入 true
longpress boolean 是否支持长按 false
color string 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark balanced
shape string 形状，可选值为 circle、square square
bind:change function 监听值变化的回调函数 -
bind:focus function 输入框聚焦时触发的回调函数 -
bind:blur function 输入框失去焦点时触发的回调函数 -

InputNumber externalClasses

名称 描述
wux-class 根节点样式类
wux-sub-class 左侧按钮样式类
wux-input-class 输入框样式类
wux-add-class 右侧按钮样式类