步进器 Stepper

步进器组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 v-mode 绑定值。

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

最大/最小值

• 通过 min 和 max 属性设置，默认无限大和无限小。

<template>
    <pure-stepper v-model="number" :min="-10" :max="10"></pure-stepper>
</template>

可输入

• 将 disabledInput 属性设置为 false 设置可输入状态。
• 默认可以输入整数和浮点数，如果限制为只能输入整数，设置 onlyInteger 为 true 即可。

<template>
    <pure-stepper v-model="number" :disabledInput="false" onlyInteger></pure-stepper>
</template>

步长

• 通过 step 属性设置步长，默认为 1。

提示

组件对小数计算进行了简单的处理，2位小数的计算一般是精确的，但是3位小数的计算结果会触发编程语言通有的浮点数计算问题，如果你对计算精度要求较高，可以通过 formatter 函数进行自定义处理，该函数需返回一个数字，参数为最新值。

<template>
    <pure-stepper v-model="number" :step="2"></pure-stepper>
    <pure-stepper v-model="number" :step="0.2"></pure-stepper>
</template>

禁用

• 通过 disabled 属性禁用整个组件。
• 通过 disabledMinus 和 disabledPlus 属性分别禁用加减按钮。

<template>
    <pure-stepper v-model="number" disabled></pure-stepper>
    <pure-stepper v-model="number" disabledMinus></pure-stepper>
    <pure-stepper v-model="number" disabledPlus></pure-stepper>
</template>

隐藏

• 通过 showMinus 和 showPlus 属性开启或关闭隐藏加减按钮功能。
• 通过 showInput 属性开启或关闭隐藏输入框功能。

<template>
    <pure-stepper v-model="number" :showMinus="false"></pure-stepper>
    <pure-stepper v-model="number" :showPlus="false"></pure-stepper>
    <pure-stepper v-model="number" :showInput="false"></pure-stepper>
</template>

异步控制

• 通过 async 属性开启异步控制功能。
• 通过 @asyncChange 监听异步控制事件。

提示

异步控制只对加减按钮有效，输入框输入的值不会触发异步控制。

<template>
    <pure-stepper v-model="number" async @asyncChange="(newNumber) => (number = newNumber)"></pure-stepper>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
modelValue	值	[Number, String]	0	-	+1.0.0
async	是否开启异步控制	Boolean	false	true	+1.0.0
min	最小值	[Number, String]	-Infinity	-	+1.0.0
max	最大值	[Number, String]	Infinity	-	+1.0.0
step	步长	[Number, String]	1	-	+1.0.0
minusIcon	减号图标名称，同图标组件（Icon）的 name 属性，参考	String	__jian	-	+1.0.0
plusIcon	加号图标名称，同图标组件（Icon）的 name 属性，参考	String	__jia	-	+1.0.0
disabled	禁用整个组件	Boolean	false	true	+1.0.0
disabledMinus	禁用减号按钮	Boolean	false	true	+1.0.0
disabledPlus	禁用加号按钮	Boolean	false	true	+1.0.0
disabledInput	禁用输入框	Boolean	false	true	+1.0.0
disabledClass	通用的禁用 class	String	pure-disabled	-	+1.0.0
btnDisabledClass	加减按钮的禁用 class	String	pure-disabled	-	+1.0.0
inputDisabledClass	输入框的禁用 class	String	pure-stepper-input-disabled	-	+1.0.0
showMinus	是否显示减号按钮	Boolean	true	false	+1.0.0
showPlus	是否显示加号按钮	Boolean	true	false	+1.0.0
showInput	是否显示输入框	Boolean	true	false	+1.0.0
onlyInteger	是否只能输入整数	Boolean	false	true	+1.0.0
formatter	值的格式化函数，参数为切换后的值	Function	undefined	-	+1.0.0
inputOpts	<pure-input> 组件的其他配置项，参考	Object	null	-	+1.0.0

提示

虽然组件对 modelValue、min、max、step 的值做了处理，可以传递字符串，但是从规范角度不建议这么做。

Event

事件名	说明	回调参数	版本
@change	值变化事件	newNum: 新值。oldNum: 旧值。	+1.0.0
@asyncChange	异步事件	newNum: 新值。oldNum: 旧值。	+1.0.0
@overflowMin	溢出设置的最小值时触发	newNum: 新值。oldNum: 旧值。	+1.0.0
@overflowMax	溢出设置的最大值时触发	newNum: 新值。oldNum: 旧值。	+1.0.0
@overflow	溢出设置的最小值或最大值时触发	newNum: 新值。oldNum: 旧值。	+1.0.0
<input> 组件的原生事件	参考	-	+1.0.0

Slots

名称	说明	参数	版本
minus	减号按钮	-	+1.0.0
plus	加号按钮	-	+1.0.0