Stepper 步进器

指定的数值范围内进行加减操作，支持多种配置，包括最小值、最大值、步长、按钮样式等

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='步进器'>
		<t-card class="mlrt.30" title="Stepper 步进器"
			sub-title="步进器组件是一个用于在指定数值范围内进行加减操作的UI元素，支持多种配置，如最小值、最大值、步长、按钮样式等。使用场景包括在需要精确控制数值增减的场景，如设置时间、金额等。"></t-card>
		 <introduction title="基础功能(主题)">
			<t-stepper class="mb.25" v-model="vala" :min="3" :max="99"></t-stepper>
			<t-stepper class="mb.25" v-model="vala" :min="3" :max="99" type="primary"></t-stepper>
			<t-stepper class="mb.25" buttonClass='r.200' input-class="bg.transparent-c.#333" v-model="vala" :min="3"
				:max="99" type="warning"></t-stepper>
			<t-stepper class="mb.25" v-model="vala" buttonClass='r.200' input-class="bg.transparent-c.#333" :min="3"
				:max="99" type="success"></t-stepper>
			<t-stepper class="mb.25" v-model="vala" buttonClass='r.200' input-class="bg.transparent-c.#333" :min="3"
				:max="99" type="error"></t-stepper>
		</introduction> 
		<introduction title="设置步长">
			<t-stepper :min="3" class='w.250' :max="99" v-model="valaa1" :step="0.01" :decimalLength="2"
				type="primary"></t-stepper>
		</introduction>

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

		<introduction title="缩放倍数(2倍)">
			<t-stepper class='ats.2-mtb.20-mlr.100' :min="1" :max="10" v-model="valaa3" type="e"></t-stepper>
		</introduction>

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

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

		<introduction title="禁用长按加减">
			<t-stepper :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>

<style lang="scss">
	.group-item {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
	}
</style>

Props

名称	描述	类型	默认值	可选值
modelValue	默认的数值	Number	0	-
min	用户可输入的最小值	Number	0	-
max	用户可输入的最大值	Number	100	-
step	步长，每次加或减的值，支持小数值	Number	1	-
buttonClass	按钮的类名	String	''	-
inputClass	输入框的类名	String	''	-
iconMinus	减少图标	String	'minus'	-
iconPlus	增加图标	String	'plus'	-
showMinus	是否显示减少按钮	Boolean	true	-
decimalLength	显示的小数位数	Number	0	-
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	当数值更新时触发	(value: number)
change	当数值改变时触发	(value: number)