步进器

步进器组件。

基础使用

通过 v-model 绑定输入框的值。

<template>
	<pure-stepper v-model="age"></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref();
</script>

最大/最小值

通过设置 max 属性可设置最大值，通过设置 min 属性可设置最小值。

<template>
	<pure-stepper
		v-model="age"
		max="100"
		min="-10"
	></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref(0);
</script>

步长

通过 step 属性设置步长。

<template>
	<pure-stepper
		v-model="age"
		step="10"
	></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref(0);
</script>

禁用状态

通过 disabled 属性设置输入框为禁用状态。

<template>
	<pure-stepper
		v-model="age"
		disabled
	></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref(0);
</script>

只读状态

通过 readonly 属性设置输入框为只读状态。

<template>
	<pure-stepper
		v-model="age"
		readonly
	></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref(0);
</script>

长按加减

通过 longpress 属性开启长按加减功能。

<template>
	<pure-stepper
		v-model="age"
		longpress
	></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref(0);
</script>

异步更新

• 通过 async 属性开启异步更新功能。
• 通过 onPlus、onMinus、onLongPlus、onLongMinus 事件监听加减事件后手动更新绑定的值。

<template>
	<pure-stepper
		v-model="age"
		async
		@onPlus="age++"
		@onPlus="handlePlus"
		@onMinus="handleMinus"
	></pure-stepper>
</template>

<script setup>
	import { ref } from "vue";

	// 年龄
	const age = ref(0);

	// 异步加
	function handlePlus() {
		uni.showLoading({
			mask: true
		});
		setTimeout(() => {
			age.value++;
			uni.hideLoading();
		}, 1500);
	}

	// 异步减
	function handleMinus() {
		uni.showLoading({
			mask: true
		});
		setTimeout(() => {
			age.value--;
			uni.hideLoading();
		}, 1500);
	}
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
v-model	[String, Number]		值
min	Number	-Infinity	最小值
max	Number	Infinity	最大值
step	Number	1	步长
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
minus	Boolean	true	显示减按钮
plus	Boolean	true	显示加按钮
minusIconName	String		减图标名称
minusIconOpts	Object		减图标选项 参考
plusIconName	String		加图标名称
plusIconOpts	Object		加图标选项 参考
async	Boolean	false	是否异步更新，开启后需要手动更新绑定的值
longpress	Boolean	false	是否开启长按事件
width	String	100%	宽度
height	Number	2.85em	高度
cursorSpacing	Number	0	指定光标与键盘的距离 参考
focus	Boolean	false	获取焦点 参考
confirmHold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起 参考
cursor	Number		指定 focus 时的光标位置 参考
cursorColor	String		光标颜色 参考
selectionStart	Number	-1	光标起始位置 参考
selectionEnd	Number	-1	光标结束位置 参考
adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面 参考
autoBlur	Boolean	false	键盘收起时，是否自动失去焦点 参考
ignoreCompositionEvent	Boolean	false	是否忽略组件内对文本合成系统事件的处理 参考
alwaysEmbed	Boolean	false	强制输入框处于同层状态 参考
holdKeyboard	Boolean	false	focus 时，点击页面的时候不收起键盘 参考
randomNumber	Boolean	false	数字键盘是否随机排列 参考
controlled	Boolean	false	是否为受控组件 参考
alwaysSystem	Boolean	false	是否强制使用系统键盘和 Web-view 创建的 input 元素 参考
inputmode	String	text	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示 参考

事件

名称	参数	说明
onInput	event	输入事件 参考
onFocus	event	聚焦事件 参考
onBlur	event	失焦事件 参考
onConfirm	event	确认事件 参考
onKeyboardHeightChange	event	键盘高度变化事件 参考
onNaN	value: 输入的值	输入非数字事件
onMinus		减事件
onPlus		加事件
onOutMin	targetValue: 目标值	超出最小值事件
onOutMax	targetValue: 目标值	超出最大值事件
onLongMinus		长按减事件
onLongPlus		长按加事件

样式变量

名称	说明
--pure-stepper-width	宽
--pure-stepper-height	高
--pure-stepper-gap	内容之间的间距
--pure-stepper-text-align	文本对齐
--pure-stepper-border-radius	边框圆角
--pure-stepper-button-width	按钮宽度
--pure-stepper-button-height	按钮高度
--pure-stepper-button-size	按钮宽度和高度
--pure-stepper-button-background	按钮背景
--pure-stepper-button-border-radius	按钮边框圆角
--pure-stepper-button-color	按钮颜色
--pure-stepper-button-font-size	按钮字体大小
--pure-stepper-button-font-weight	按钮字体粗细
--pure-stepper-button-disabled-background	按钮禁用背景
--pure-stepper-button-disabled-opacity	按钮禁用透明度
--pure-stepper-content-background	内容背景
--pure-stepper-content-border-radius	内容边框圆角
--pure-stepper-input-font-size	输入框字体大小
--pure-stepper-input-font-weight	输入框字体粗细
--pure-stepper-input-color	输入框颜色
--pure-stepper-disabled-opacity	禁用透明度