Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

导入

import Stepper from '@/components/form/Stepper.vue';

使用方法

基础用法

步进器的基础使用方式。

<template>
  <Stepper v-model="value" />
</template>

<script setup lang="ts">
import Stepper from '@/components/form/Stepper.vue';
import { ref } from 'vue';

const value = ref(1);
</script>

步长设置

通过设置 step 属性来控制每次点击增加或减少按钮时的变化值。

<template>
  <Stepper v-model="value" :step="3" />
</template>

<script setup lang="ts">
import Stepper from '@/components/form/Stepper.vue';
import { ref } from 'vue';

const value = ref(1);
</script>

限制输入范围

通过设置 max 属性来限制最大值。

<template>
  <Stepper v-model="value" :max="10" />
</template>

限制输入整数

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

<template>
  <Stepper v-model="value" integer />
</template>

禁用状态

通过设置 disabled 属性来禁用步进器。

<template>
  <Stepper v-model="value" disabled />
</template>

禁用输入框

通过设置 disableInput 属性来禁用输入框，但仍可点击按钮调整数值。

<template>
  <Stepper v-model="value" disableInput />
</template>

固定小数位数

通过设置 decimalLength 属性来固定显示的小数位数。

<template>
  <Stepper v-model="value" :decimalLength="1" :step="0.1" />
</template>

不同大小的步进器

通过设置 size 属性来调整步进器的大小。

<template>
  <FlexCol gap="10">
    <Stepper v-model="value" size="small" />
    <Stepper v-model="value" size="medium" />
    <Stepper v-model="value" size="large" />
  </FlexCol>
</template>

<script setup lang="ts">
import Stepper from '@/components/form/Stepper.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import { ref } from 'vue';

const value = ref(1);
</script>

API 参考

Stepper

步进器组件。

Props

名称	说明	类型	必填	默认值
v-model	当前数值	number	否	0
max	最大值，为空无限制	number	否	undefined
min	最小值	number	否	1
inputWidth	中间输入框的宽度	number	否	100
size	组件大小	'small' | 'medium' | 'large'	否	'medium'
step	步长，每次点击时改变的值	number	否	1
defaultValue	初始值，当 value 为空时生效	number	否	0
decimalLength	固定显示的小数位数	number	否	0
disabled	是否禁用	boolean	否	false
disableInput	是否禁用输入框	boolean	否	false
integer	是否只允许输入整数	boolean	否	false
textColor	输入框的文本颜色	string	否	-
placeholder	输入框的占位符	string	否	-
placeholderTextColor	输入框的占位符颜色	string	否	-
addIcon	加号图标名称	string	否	'add-bold'
minusIcon	减号图标名称	string	否	'minus-bold'

Slots

名称	说明
minus	自定义减号按钮，参数为 { disabled, onClick }
center	自定义中间输入区域，参数为 { disableInput, value, integer, onChangeText, onBlur, editable }
add	自定义加号按钮，参数为 { disabled, onClick }

Events

名称	说明	参数
update:modelValue	数值变化时触发	number

主题变量

名称	类型	默认值	说明
StepperInputWidth	number	100	输入框宽度
StepperButtonBorderRadius	number	0	按钮边框圆角
StepperButtonBackgroundColor	string	light	按钮背景颜色
StepperButtonPaddingVertical	number	8	按钮垂直内边距
StepperButtonPaddingHorizontal	number	8	按钮水平内边距
StepperInputBackgroundColor	string	light	输入框背景颜色
StepperInputPaddingVertical	number	0	输入框垂直内边距
StepperInputPaddingHorizontal	number	10	输入框水平内边距
StepperInputMarginHorizontal	number	4	输入框水平外边距
StepperInputMarginVertical	number	0	输入框垂直外边距
StepperInputTextColor	string	text.content	输入框文本颜色
StepperIconSizeSmall	number	24	小号图标大小
StepperIconSizeMedium	number	36	中号图标大小
StepperIconSizeLarge	number	48	大号图标大小
StepperAddIcon	string	add-bold	加号图标名称
StepperMinusIcon	string	minus-bold	减号图标名称