@wines/input-number v1.5.1

@wines/input-number

InputNumber 数字输入框

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

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "InputNumber",
  "usingComponents": {
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group",
    "wux-input-number": "@wines/input-number"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">InputNumber</view>
		<view class="page__desc">数字输入框</view>
	</view>
	<view class="page__bd">
		<wux-cell-group title="默认">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number default-value="1024" slot="footer" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="主题色">
			<wux-cell title="Light" hover-class="none">
				<wux-input-number color="light" slot="footer" />
			</wux-cell>
			<wux-cell title="Stable" hover-class="none">
				<wux-input-number color="stable" slot="footer" />
			</wux-cell>
			<wux-cell title="Positive" hover-class="none">
				<wux-input-number color="positive" slot="footer" />
			</wux-cell>
			<wux-cell title="Calm" hover-class="none">
				<wux-input-number color="calm" slot="footer" />
			</wux-cell>
			<wux-cell title="Balanced" hover-class="none">
				<wux-input-number color="balanced" slot="footer" />
			</wux-cell>
			<wux-cell title="Energized" hover-class="none">
				<wux-input-number color="energized" slot="footer" />
			</wux-cell>
			<wux-cell title="Assertive" hover-class="none">
				<wux-input-number color="assertive" slot="footer" />
			</wux-cell>
			<wux-cell title="Royal" hover-class="none">
				<wux-input-number color="royal" slot="footer" />
			</wux-cell>
			<wux-cell title="Dark" hover-class="none">
				<wux-input-number color="dark" slot="footer" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="圆形按钮">
			<wux-cell title="Light" hover-class="none">
				<wux-input-number shape="circle" color="light" slot="footer" />
			</wux-cell>
			<wux-cell title="Stable" hover-class="none">
				<wux-input-number shape="circle" color="stable" slot="footer" />
			</wux-cell>
			<wux-cell title="Positive" hover-class="none">
				<wux-input-number shape="circle" color="positive" slot="footer" />
			</wux-cell>
			<wux-cell title="Calm" hover-class="none">
				<wux-input-number shape="circle" color="calm" slot="footer" />
			</wux-cell>
			<wux-cell title="Balanced" hover-class="none">
				<wux-input-number shape="circle" color="balanced" slot="footer" />
			</wux-cell>
			<wux-cell title="Energized" hover-class="none">
				<wux-input-number shape="circle" color="energized" slot="footer" />
			</wux-cell>
			<wux-cell title="Assertive" hover-class="none">
				<wux-input-number shape="circle" color="assertive" slot="footer" />
			</wux-cell>
			<wux-cell title="Royal" hover-class="none">
				<wux-input-number shape="circle" color="royal" slot="footer" />
			</wux-cell>
			<wux-cell title="Dark" hover-class="none">
				<wux-input-number shape="circle" color="dark" slot="footer" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="设置 callback 回调函数，在调试窗口中输出">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number
				 longpress
				 disabled="{{ false }}"
				 value="{{ value }}"
				 controlled
				 min="{{ -10 }}"
				 max="{{ 10 }}"
				 bind:change="onChange"
				 slot="footer"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="自定义样式">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number
				 wux-sub-class="sub"
				 wux-input-class="input"
				 wux-add-class="add"
				 slot="footer"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="设置步长为0.5">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number step="{{ .5 }}" slot="footer" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="设置值为1，最小值为-5，最大值为8">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number
				 default-value="1"
				 min="{{ -5 }}"
				 max="{{ 8 }}"
				 slot="footer"
				/>
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="设置可输入">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number disabled="{{ false }}" slot="footer" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="设置长按快速加减">
			<wux-cell title="数量" hover-class="none">
				<wux-input-number longpress slot="footer" />
			</wux-cell>
		</wux-cell-group>
		<wux-cell-group title="循环输出多个组件">
			<block wx:for="{{ items }}" wx:key="index">
				<wux-cell title="{{ item.text }}" hover-class="none">
					<wux-input-number default-value="{{ item.value }}" slot="footer" />
				</wux-cell>
			</block>
		</wux-cell-group>
	</view>
</view>

import './index.less';

Page({
  data: {
    items: [
      {
        id: '001',
        text: '房间',
        value: 1,
      },
      {
        id: '002',
        text: '成人',
        value: 2,
      },
    ],
    value: 1,
  },
  onChange(e) {
    console.log(e);
    this.setData({
      value: e.detail.value,
    });
  },
});

API

InputNumber props

InputNumber externalClasses