Stepper 步进器

通过 +/- 按钮调整数值，支持范围、步长和整数限制

步进器组件，通过 +/- 按钮调整数值，支持范围、步长和整数限制

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-stepper class="demo-default" />
  <re-stepper class="demo-value" :value="5" />

<!-- 禁用与禁用输入 -->
  <re-stepper class="demo-disabled" :disabled="true" :value="3" />
  <re-stepper class="demo-disable-input" :disableInput="true" :value="3" />

<!-- 主题 -->
  <re-stepper class="demo-theme-normal" theme="normal" :value="2" />
  <re-stepper class="demo-theme-filled" theme="filled" :value="2" />
  <re-stepper class="demo-theme-outline" theme="outline" :value="2" />
  <re-stepper class="demo-theme-column" theme="column" :value="2" />

<!-- 整数限制 -->
  <re-stepper class="demo-integer" :integer="true" :value="4" />
  <re-stepper class="demo-decimal" :step="0.5" :value="1.5" />

<!-- 最小最大值 -->
  <re-stepper class="demo-min-max" :min="0" :max="10" :value="5" />
  <re-stepper class="demo-neg-min" :min="-5" :max="5" :value="0" />

<!-- 步长 -->
  <re-stepper class="demo-step" :step="5" :value="0" />
  <re-stepper class="demo-step-2" :step="2" :value="4" />

<!-- 边界值 -->
  <re-stepper class="demo-at-min" :min="0" :max="10" :value="0" />
  <re-stepper class="demo-at-max" :min="0" :max="10" :value="10" />

<!-- 禁用输入显示文本 -->
  <re-stepper class="demo-value-text" :disableInput="true" :value="8" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-stepper />。

API

Stepper Props

名称	类型	默认值	描述	必传
value	`number`	0	当前值	N
min	`number`	-Infinity	最小值	N
max	`number`	Infinity	最大值	N
step	`number`	1	步长	N
disabled	`boolean`	false	是否禁用	N
disableInput	`boolean`	false	是否禁用输入框	N
theme	`string`	"normal"	主题样式，可选值：normal / filled / outline / column	N
integer	`boolean`	false	是否只允许整数	N
customStyle	`string`	""	自定义样式	N

Stepper Events

名称	参数	描述
change	value: number	值变化时触发
overlimit	type: string	达到最小/最大值时触发
update:modelValue	value: number	v-model 更新事件

Stepper Slots

名称	描述
-	-

Slider 滑动选择器

用于在一定范围内选择数值，支持步长、范围和数值显示

Switch 开关

参考 TDesign switch 示例，支持文字/图标内容、加载态、自定义颜色和不同尺寸动画。

内容锚点

演示
代码示例
引入
API