# t-stepper

Stepper 步进器

t-stepper 组件介绍

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

t-stepper 平台兼容

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

t-stepper 基础用法

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

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Stepper 步进器"
				sub-title="步进器组件是一个用于在指定数值范围内进行加减操作的UI元素，支持多种配置，如最小值、最大值、步长、按钮样式等。使用场景包括在需要精确控制数值增减的场景，如设置时间、金额等。"></t-card>

		<introduction title="基础功能-类型-尺寸">
			<t-stepper class="mb-15"
					   v-model="vala"
					   :min="3"
					   :max="99"
					   type="primary"
					   size="large"></t-stepper>

			<t-stepper class="mb-15"
					   button-class='r-100!'
					   :input-class="[`bgn! w-25! ttc-`]"
					   v-model="vala"
					   :min="3"
					   :max="99"
					   type="warning"
					   size="medium"></t-stepper>

			<t-stepper class="mb-15"
					   v-model="vala"
					   :min="3"
					   :max="99"
					   type="success"
					   effect="light"
					   size="small"></t-stepper>

			<t-stepper class="mb-15"
					   v-model="vala"
					   buttonmain-class='r-100'
					   :min="3"
					   :max="99"
					   type="error"
					   size="mini"></t-stepper>
		</introduction>

		<introduction title="设置步长">
			<t-stepper :min="3"
					   :max="99"
					   class='w-125'
					   v-model="valaa1"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>

		<introduction title="宽度设置">
			<t-stepper class='w-225!'
					   :min="1"
					   :max="10"
					   v-model="valaa2"
					   type="success"></t-stepper>
		</introduction>

		<introduction title="禁用编辑">
			<t-stepper class='w-125'
					   :disabledInput="true"
					   :min="3"
					   :max="99"
					   v-model="valaa4"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>

		<introduction title="只能减少不能增加">
			<t-stepper :disablePlus="true"
					   :min="3"
					   :max="99"
					   v-model="valaa5"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>

		<introduction title="只能增加不能减少">
			<t-stepper :disableMinus="true"
					   :min="3"
					   :max="99"
					   v-model="valaa6"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>

		<introduction title="全部禁用">
			<t-stepper class='w-125'
					   :disabled="true"
					   :min="3"
					   :max="99"
					   v-model="valaa7"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>

		<introduction title="长按加减时间间隔">
			<t-stepper class='w-125'
					   :plusInterval="10"
					   :min="3"
					   :max="99"
					   v-model="valaa8"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>

		<introduction title="禁用长按加减">
			<t-stepper class='w-125'
					   :longPress="false"
					   :min="3"
					   :max="99"
					   v-model="valaa9"
					   :step="0.01"
					   type="primary"></t-stepper>
		</introduction>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const val = ref(30)
	const vala = ref(1)
	const valaa1 = ref(1)
	const valaa2 = ref(1)
	const valaa3 = ref(1)
	const valaa4 = ref(6)
	const valaa5 = ref(6)
	const valaa6 = ref(6)
	const valaa7 = ref(6)
	const valaa8 = ref(6)
	const valaa9 = ref(6)
</script>

t-stepper 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

t-stepper 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	输入框文本样式类