Stepper 步进器

用于在一定范围内输入、调整数字。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定输入值，点击增减按钮时会自动更新。

<zq-stepper v-model="value" />

const value = ref(1)

步长设置

通过 step 属性设置每次增减的步长。

<zq-stepper v-model="value" :step="2" />

限制范围

通过 min 和 max 属性限制输入值的范围。

<zq-stepper v-model="value" :min="1" :max="10" />

禁用状态

通过 disabled 属性禁用步进器。

<zq-stepper v-model="value" disabled />

禁用输入框

通过 disable-input 属性禁用输入框，只能通过按钮操作。

<zq-stepper v-model="value" disable-input />

整数模式

通过 integer 属性限制只能输入整数。

<zq-stepper v-model="value" integer />

圆角风格

通过 theme="round" 设置圆角风格。

<zq-stepper v-model="value" theme="round" />

API

Props

参数	说明	类型	默认值
v-model	当前值	number	1
min	最小值	number	1
max	最大值	number	Infinity
step	步长	number	1
disabled	是否禁用	boolean	false
disable-input	是否禁用输入框	boolean	false
integer	是否只允许输入整数	boolean	false
theme	主题风格	'default' | 'round'	'default'

Events

事件名	说明	回调参数
update:modelValue	值变化时触发	value: number
change	值变化时触发	value: number
plus	点击增加按钮时触发	-
minus	点击减少按钮时触发	-

主题定制

变量名	说明
--color-bg-input	按钮/输入框背景色
--color-primary	圆角风格增加按钮背景色
--color-text-primary	输入框文字/图标颜色
--color-text-disabled	禁用时图标颜色