Stepper 步进器

介绍

数字调整输入，可设置范围和指定步长。

基础用法

通过 v-model 绑定选中的值。

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

const value = ref(0);

步长设置

通过 step 属性设置步长，如需单独控制输入步长，可通过 input-step 属性单独设置。

<vd-stepper v-model="value" :step="3" />

const value = ref(0);

限制输入范围

通过 min 和 max 属性设置输入范围。

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

const value = ref(0);

固定小数位数

通过 decimals 属性设置固定小数位数。

<vd-stepper v-model="value" :decimals="1" />

const value = ref(0);

允许空值、设置占位符

通过 allow-empty 属性允许空值，通过 placeholder 属性设置占位符。

<vd-stepper v-model="value" :allow-empty="true" placeholder="请输入" />

const value = ref(0);

不可输入

通过 inputable 属性设置控制是否允许输入。

<vd-stepper v-model="value" :inputable="true" />

const value = ref(0);

禁用状态

通过 disabled 属性禁用步进器。

<vd-stepper v-model="value" :disabled="true" />

const value = ref(0);

API

Props

参数	说明	类型	默认值
v-model	选中值	string | number	-
min	最小值	string | number	0
max	最大值	string | number	-
step	步长	string | number	1
decimals	固定小数位数长度	string | number	-
placeholder	空值时显示的占位符	string	-
inputable	是否允许输入	boolean	true
input-step	输入步长	string | number	1
input-width	输入框宽度	string | number	36
input-height	输入框高度	string | number	28
allow-empty	是否允许空值	boolean	false
disabled	是否禁用	boolean	false
disabled-minus	是否禁用减少按钮	boolean	false
disabled-add	是否禁用增加按钮	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	改变时触发	string

Slots

名称	说明
minus	减少按钮
add	增加按钮

Expose

方法名	说明	参数	返回值
minus	减少操作	-	-
add	增加操作	-	-