Stepper (步进器)

在指定数值范围内进行加减操作的UI元素，支持多种配置，如最小值、最大值、步长、按钮样式等。使用场景包括在需要精确控制数值增减的场景，如设置时间、金额等。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page title='步进器'>
		<t-card main-class="mlrt-30" title="Stepper 步进器"
			sub-title="步进器组件是一个用于在指定数值范围内进行加减操作的UI元素，支持多种配置，如最小值、最大值、步长、按钮样式等。使用场景包括在需要精确控制数值增减的场景，如设置时间、金额等。"></t-card>
		<introduction title="基础功能-类型-尺寸">
			<text>{{vala}}</text>
			<t-stepper main-class="mb-25" effect="p" v-model="vala" :min="3" :max="99" size="large"></t-stepper>
			<t-stepper main-class="mb-25" v-model="vala" :min="3" :max="99" type="primary" size="large"></t-stepper>
			<!-- 图标不能居中可用icon-minus-class="mlt-2" icon-plus-class="mlt-3"调整样式 -->
			<t-stepper main-class="mb-25" buttonClass='r-200' input-class="bgn w-100" input-text-class="c-#333"
				input-placeholder-style="c-#666" v-model="vala" :min="3" :max="99" type="warning"
				size="medium"></t-stepper>
			<t-stepper main-class="mb-25" v-model="vala" buttonmain-class='r-200' :min="3" :max="99" type="success"
				size="small" effect="light"></t-stepper>
			<t-stepper main-class="mb-25" v-model="vala" buttonmain-class='r-200' :min="3" :max="99" type="error"
				size="mini"></t-stepper>
		</introduction>
		<introduction title="设置步长">
			<t-stepper :min="3" :max="99" main-class='w-250' v-model="valaa1" :step="0.01" type="primary"></t-stepper>
		</introduction>

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

		<introduction title="禁用编辑">
			<t-stepper main-class='w-250' :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 main-class='w-250' :disabled="true" :min="3" :max="99" v-model="valaa7" :step="0.01"
				type="primary"></t-stepper>
		</introduction>

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

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

<script>
	export default {
		data() {
			return {
				val: 30,
				vala: 1,
				valaa1: 1,
				valaa2: 1,
				valaa3: 1,
				valaa4: 6,
				valaa5: 6,
				valaa6: 6,
				valaa7: 6,
				valaa8: 6,
				valaa9: 6,
			};
		},
		methods: {

		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
max	Number	100	用户可输入的最大值
buttonLeftClass	String	``	右边按钮的样式
modelValue	Number	1	默认值
min	Number	1	用户可输入的最小值
buttonClass	String	``	按钮的样式
iconMinusClass	String	``	减少图标的样式
step	Number	1	步长，每次加或减的值，支持小数值
buttonRightClass	String	``	左边按钮的样式
inputClass	String	``	编辑输入框样式
inputTextClass	String	``	编辑输入文本样式
iconPlusClass	String	``	增加图标的样式
inputPlaceholderStyle	String	``	编辑区占位样式
iconPlus	String	plus	增加按钮图标名称
showPlus	Boolean	true	是否显示增加按钮
disableMinus	Boolean	false	是否禁用减少按钮
cursorSpacing	Number	100	指定光标于键盘的距离，避免键盘遮挡输入框，单位px
iconMinus	String	minus	减少按钮图标名称
showMinus	Boolean	true	是否显示减少按钮
disabledInput	Boolean	false	是否禁用编辑
disablePlus	Boolean	false	是否禁用增加按钮
plusInterval	Number	100	长按加减间隔
longPress	Boolean	true	是否允许长按进行加减

事件

名称	返回参数	说明
change	(value: number)	当数值改变时触发