Stepper 步进器

代码演示

组件类型

基础步进器

在 Stackblitz 中打开

组件状态

最大最小状态

在 Stackblitz 中打开

禁用状态

在 Stackblitz 中打开

组件样式

步进器样式

在 Stackblitz 中打开

步进器尺寸

在 Stackblitz 中打开

Stepper Props

名称类型默认值描述必传
disableInputBooleanfalse禁用输入框N
disabledBooleanundefined禁用全部操作N
inputWidthNumber-输入框宽度N
integerBooleantrue是否整型N
maxNumber100最大值N
minNumber0最小值N
sizeStringmedium组件尺寸。可选项：small/medium/large。TS 类型：SizeEnum。通用类型定义N
stepNumber1步长N
themeStringnormal组件风格。可选项：normal/filled/outlineN
valueString / Number0值。支持语法糖 v-model 或 v-model:valueN
defaultValueString / Number0值。非受控属性N
onBlurFunctionTS 类型：(value: string \| number) => void
输入框失去焦点时触发		N
onChangeFunctionTS 类型：(value: string \| number) => void
数值发生变更时触发		N
onFocusFunctionTS 类型：(value: string \| number) => void
输入框聚焦时触发		N
onOverlimitFunctionTS 类型：(type: 'minus' \| 'plus') => void
数值超出限制时触发		N

Stepper Events

名称参数描述
blur(value: string \| number)输入框失去焦点时触发
change(value: string \| number)数值发生变更时触发
focus(value: string \| number)输入框聚焦时触发
overlimit(type: 'minus' \| 'plus')数值超出限制时触发

CSS Variables

组件提供了下列 CSS 变量，可用于自定义样式。

名称默认值描述
--td-stepper-border-color@component-border-
--td-stepper-border-radius@radius-small-
--td-stepper-input-color@font-gray-1-
--td-stepper-input-disabled-bg@bg-color-component-disabled-
--td-stepper-input-disabled-color@font-gray-4-

何时使用

需要进行数量选择时使用

常见用法

通常用于数量选择，如选择人数、天数、商品数量等
用户可通过“+”“-”按钮调整数值，或点击数字输入框来输入具体的数值

推荐/慎用示例

点击“+”“-”按钮时，数值增减的步长相同，不建议进行不同步长的变化

相似组件

组件名何时使用
滑动选择器当用户需要快捷地进行数值/程度选择时使用。
输入框需要进行文字输入，且需填写的字数较少时使用。

Web 桌面端

Vue Stable Version：undefined
Vue Next Stable Version：undefined
React Stable Version：undefined

Mobile 移动端

Vue Next Stable Version：alpha
React Alpha Version：alpha
Flutter Alpha Version：alpha
微信小程序 Stable Version：alpha
QQ 小程序 Alpha Version：alpha