Stepper 步进器
APP
PC
用作增加或者减少当前数值。
规则
- 当想要对数值进行小幅度调整时,可以使用 Stepper,eg:将年化收益从 4.00% 调整到 4.05%。
引入方式
数字生活网页应用工程中,不需要 import,直接使用组件标签即可。
import {Stepper} from '@21cnfe/vui' Vue.component('Stepper', Stepper)
|
代码演示
基本用法
<Stepper :min="1" :max="5" v-model="value" :defaultValue="3"></Stepper>
|
输入控制
readonly 只读属性控制是否可通过键盘输入修改步数
<Stepper :min="1" :max="5" v-model="value" readOnly></Stepper>
|
禁用状态
<Stepper :min="1" :max="5" v-model="value" disabled></Stepper>
|
步数控制
step 属性设置每次改变步数,支持小数步数
<Stepper :min="1" :max="5" v-model="value" :step="3"></Stepper>
|
API
属性 |
说明 |
类型 |
默认值 |
v-model |
绑定值 |
Number |
0 |
min |
最小值 |
Number |
-- |
max |
最大值 |
Number |
-- |
step |
每次改变步数,支持小数步数,保留两位小数 |
Number | String |
1 |
defaultValue |
初始值 |
Number |
-- |
disabled |
禁用 |
Boolean |
false |
readOnly |
input 只读 |
Boolean |
false |
showNumber |
显示input值 |
Boolean |
true |
Event
事件名称 |
说明 |
回调参数 |
onChange |
值发生变化时回调函数 |
currentValue |