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
  1. 1. Stepper 步进器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
    4. 1.4. API
    5. 1.5. Event