# Stepper 步进器
# 介绍
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
# 引入
在 main.js 中引入,参考快速上手。
// 引入组件库
import VsStepper from 'visn/packages/vs-stepper'
// 组件按需引入注册
VsStepper.install(Vue)
1
2
3
4
2
3
4
# 使用
# 基础用法
可以通过change
事件监听到输入值的变化,接收到一个参数,即输入框的值。
<vs-stepper @change="onChange"></vs-stepper>
1
# 步长设置
通过step属性设置每次点击增加或减少按钮时变化的值,默认为1。
<vs-stepper step="2"></vs-stepper>
1
# 限制输入范围
通过min
和max
属性限制输入值的范围,默认从0开始。
<vs-stepper min="5" max="8"></vs-stepper>
1
# 禁用状态
通过设置disabled
属性来禁用步进器,禁用状态下无法点击按钮或修改输入框。
<vs-stepper disabled></vs-stepper>
1
# 限制输入范围
设置integer
属性后,输入框将限制只能输入整数。
<vs-stepper integer></vs-stepper>
1