t-stepper

Stepper 步进器

组件介绍

t-stepper 用于在指定数值范围内进行加减操作，支持最小值、最大值、步长配置，提供按钮样式自定义和长按快速增减功能。适用于商品数量选择、时间设置等场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/stepper/stepper.uvue，通过 v-model 双向绑定数值。

<template>
  <view class="stepper-demo">
    <!-- 基础用法 -->
    <t-stepper v-model="value1"></t-stepper>
    
    <!-- 设置范围 -->
    <t-stepper v-model="value2" :min="1" :max="10"></t-stepper>
    
    <!-- 设置步长 -->
    <t-stepper v-model="value3" :step="0.5" :decimalPlaces="1"></t-stepper>
    
    <!-- 禁用状态 -->
    <t-stepper v-model="value4" disabled></t-stepper>
    
    <!-- 禁用输入 -->
    <t-stepper v-model="value5" :disabledInput="true"></t-stepper>
    
    <!-- 自定义尺寸 -->
    <t-stepper v-model="value6" size="large" type="primary"></t-stepper>
  </view>
</template>

<script setup>
const value1 = ref(1);
const value2 = ref(5);
const value3 = ref(1.5);
const value4 = ref(3);
const value5 = ref(2);
const value6 = ref(1);
</script>

<style scoped>
.stepper-demo {
  padding: 40rpx;
}
.stepper-demo t-stepper {
  margin-bottom: 30rpx;
}
</style>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用整个组件	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
modelValue	当前数值	number	0
min	最小值	number	0
max	最大值	number	100
step	步长，每次增减的值	number	1
buttonClass	按钮的样式类	string	''
buttonLeftClass	左侧按钮的样式类	string	''
buttonRightClass	右侧按钮的样式类	string	''
iconMinusClass	减少图标样式类	string	''
iconPlusClass	增加图标样式类	string	''
inputClass	输入框样式类	string	''
inputTextClass	输入框文本样式类	string	''
iconMinus	减少按钮图标名称	string	'minus'
iconPlus	增加按钮图标名称	string	'plus'
showMinus	是否显示减少按钮	boolean	true
showPlus	是否显示增加按钮	boolean	true
disabledInput	是否禁用输入框编辑	boolean	false
disableMinus	是否禁用减少按钮	boolean	false
disablePlus	是否禁用增加按钮	boolean	false
cursorSpacing	指定光标与键盘的距离，避免键盘遮挡输入框（单位 px）	number	100
plusInterval	长按加减的时间间隔（毫秒）	number	100
longPress	是否允许长按进行快速加减	boolean	true

Events

事件名	说明	回调参数
update:modelValue	值更新时触发	number
change	数值改变时触发	number
click	点击时触发	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发	-

外部类

类名	说明
button-class	按钮样式类
button-left-class	左侧按钮样式类
button-right-class	右侧按钮样式类
icon-minus-class	减少图标样式类
icon-plus-class	增加图标样式类
input-class	输入框样式类
input-text-class	输入框文本样式类