Appearance
步进器 Stepper
用于商品列表、快速下单、双列推荐及购物车中的数量增减控制，内置 36×36 隐形扩大触控热区，支持按业务场景自动切换双尺寸与双视觉主题。
默认尺寸（商品分类 / 快速下单）
size="default" + theme="round"：圆形按钮 22×22，输入框 26×24，间距 4px。支持自定义起购量 min、限购量 max 与步长 step。
5
vue
<Stepper :max="30" :min="0" :step="5" v-model="count"/>小尺寸（双列推荐卡片）
size="small" + theme="round"：圆形按钮 20×20，输入框 28×22，间距 2px，专为双列瀑布流窄卡片定制。
1
vue
<Stepper size="small" v-model="count"/>扁平无底色（购物车结算列表）
theme="flat"：去除圆形外框与输入框灰底，采用纯净加减图标与单一标准尺寸。
2
vue
<Stepper theme="flat" v-model="count"/>API 参数说明
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 当前绑定数量（支持 v-model） | number | 1 |
size | 尺寸规格：default（分类/快速下单）/ small（双列推荐） | string | 'default' |
theme | 视觉风格：round（圆形底色）/ flat（购物车扁平无底色） | string | 'round' |
min | 最小允许数量（达到后减号自动置灰禁用） | number | 0 |
max | 最大允许数量（达到后加号自动置灰禁用） | number | 9999 |
step | 每次点击增减的步长 | number | 1 |
事件说明
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:modelValue | 数值变更时触发 | (val: number) |
change | 点击加减按钮导致数值变化时触发 | (val: number) |