更新记录
1.0.1(2025-03-25)
下载此版本
1.0.0(2025-03-25)
下载此版本
1.0.0(2025-03-25)
平台兼容性
uni-app
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
- |
- |
√ |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
rm-stepper 使用文档
介绍
rm-stepper 是一个步进器组件,支持增减数值,并可自定义步长、最小/最大值、禁用状态等。
使用方法
基本用法
<rm-stepper v-model="value" />
设置最小值和最大值
<rm-stepper v-model="value" :min="1" :max="10" />
设置步长
<rm-stepper v-model="value" :step="2" />
禁用状态
<rm-stepper v-model="value" disabled />
禁用输入框
<rm-stepper v-model="value" disable-input />
监听事件
<rm-stepper v-model="value" @change="onChange" @plus="onPlus" @minus="onMinus" />
methods: {
onChange(event) {
console.log('change:', event.detail.value);
},
onPlus(event) {
console.log('plus:', event.detail.value);
},
onMinus(event) {
console.log('minus:', event.detail.value);
}
}
Props
| 参数 |
说明 |
类型 |
默认值 |
| value |
当前值 |
Number/String |
- |
| min |
最小值 |
Number |
-Infinity |
| max |
最大值 |
Number |
Infinity |
| step |
步长 |
Number |
1 |
| integer |
是否只允许整数 |
Boolean |
false |
| disabled |
是否禁用整个组件 |
Boolean |
false |
| disableInput |
是否禁用输入框 |
Boolean |
false |
| asyncChange |
是否异步更新值 |
Boolean |
false |
| inputWidth |
输入框宽度(rpx) |
Number/String |
80 |
事件
| 事件名 |
说明 |
回调参数 |
| input |
输入框值变化时触发 |
(value: Number) |
| change |
组件值变化时触发 |
(value: Number) |
| plus |
点击 + 号时触发 |
(value: Number) |
| minus |
点击 - 号时触发 |
(value: Number) |
| blur |
输入框失去焦点时触发 |
(value: Number) |
样式自定义
可以通过 scoped 样式覆盖组件默认样式,例如修改按钮大小:
.rm-stepper__minus, .rm-stepper__plus {
width: 60rpx;
height: 60rpx;
}