开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
NumberBox 步进器
NumberBox 步进器 平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
基本使用
通过v-model
绑定value
初始值,此值是双向绑定的,无需在回调中将返回的数值重新赋值给value
。
<template>
<u-number-box v-model="value" @change="valChange"></u-number-box>
</template>
<script>
export default {
data() {
return {
value: 0
}
},
methods: {
valChange(e) {
console.log('当前值为: ' + e.value)
}
}
}
</script>
步长设置
- 通过
step
属性设置每次点击增加或减少按钮时变化的值,默认为1
注意: 自1.4.5
版本起,step
参数支持小数值,如1.1
、0.3
等 1.4.5
下面示例每次都会加2或者减2
<u-number-box :step="2"></u-number-box>
限制输入范围
通过min
和max
参数限制输的入值最小值和最大值
<u-number-box :min="1" :max="100"></u-number-box>
禁用状态
通过设置disabled
参数来禁用输入框,禁用状态下无法点击加减按钮或修改输入框的值
<u-number-box :disabled="true"></u-number-box>
自定义大小
- 通过
input-width
参数设置输入框的宽度 - 通过
input-height
参数设置输入框和按钮的高度,单位都是rpx
<u-number-box :input-width="100" :input-height="60"></u-number-box>
API
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
v-model | 输入框初始值 | Number | 1 | - |
bg-color | 输入框和按钮的背景颜色 | String | #F2F3F5 | - |
min | 用户可输入的最小值 | Number | 0 | - |
max | 用户可输入的最大值 | Number | 99999 | - |
step | 步长,每次加或减的值,1.4.5起支持小数值,如需小数,请设置positive-integer 为false | Number | 1 | - |
disabled | 是否禁用操作,禁用后无法加减或手动修改输入框的值 | Boolean | false | true |
size | 输入框文字和按钮字体大小,单位rpx | String | Number | 26 | - |
color | 输入框文字和加减按钮图标的颜色 | String | #323233 | - |
input-width | 输入框宽度,单位rpx | String | Number | 80 | - |
input-height | 输入框和按钮的高度,单位rpx | String | Number | 50 | - |
index | 事件回调时用以区分当前发生变化的是哪个输入框 | String | Number | - | - |
disabled-input | 是否禁止输入框手动输入值 | Boolean | false | true |
cursor-spacing | 指定光标于键盘的距离,避免键盘遮挡输入框,单位rpx | String | Number | 200 | - |
long-press 1.4.5 | 是否开启长按连续递增或递减 | Boolean | true | false |
press-time 1.4.5 | 开启长按触发后,每触发一次需要多久,单位ms | String | Number | 250 | - |
positive-integer 1.5.6 | 是否只能输入正整数 | Boolean | true | false |
Events
事件名 | 说明 | 回调参数 | 版本 |
---|---|---|---|
change | 输入框内容发生变化时触发,对象形式 | value:输入框当前值,index:通过props传递的index 值 | - |
blur | 输入框失去焦点时触发,对象形式 | value:输入框当前值,index:通过props传递的index 值 | - |
minus | 点击减少按钮时触发(按钮可点击情况下),对象形式 | value:输入框当前值,index:通过props传递的index 值 | - |
plus | 点击增加按钮时触发(按钮可点击情况下),对象形式 | value:输入框当前值,index:通过props传递的index 值 | - |
blur 1.7.6 | 输入框失去焦点时触发,对象形式 | value:输入框当前值,index:通过props传递的index 值 | - |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论