Stepper 步进器
介绍
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
代码演示
基础用法
通过 v-model
绑定输入值,可以通过 change
事件监听到输入值的变化。
<z-stepper v-model="value" />
import { ref } from 'vue';
const value = ref(1);
限制输入范围
通过 min
和 max
属性限制输入值的范围,默认超出范围后会自动校正最大值或最小值,通过 auto-fixed
可以关闭自动校正。
<z-stepper v-model="value" min="5" max="8" />
固定小数位数
通过设置 decimal-length
属性可以保留固定的小数位数。
<z-stepper v-model="value" step="0.2" :decimal-length="1" />
自定义大小
通过 input-width
属性设置输入框宽度,通过 button-size
属性设置按钮大小和输入框高度。
<z-stepper v-model="value" input-width="80rpx" button-size="64rpx" />
异步变更
通过 before-change
属性可以在输入值变化前进行校验和拦截。
<z-stepper v-model="value" :before-change="beforeChange" />
import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const beforeChange = () => {
toast.showLoadingToast({ forbidClick: true })
return new Promise((resolve) => {
setTimeout(() => {
toast.closeToast()
resolve(true)
}, 1000)
})
}
圆角风格
将 theme
设置为 round
来展示圆角风格的步进器。
<z-stepper v-model="value" theme="round" button-size="22" disable-input />
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前输入的值 | number | string | - |
min | 最小值 | number | string | 1 |
max | 最大值 | number | string | - |
auto-fixed | 是否自动校正超出限制范围的数值,设置为 false 后输入超过限制范围的数值将不会自动校正 | boolean | true |
default-value | 初始值,当 v-model 为空时生效 | number | string | 1 |
step | 步长,每次点击时改变的值 | number | string | 1 |
name | 标识符,通常为一个唯一的字符串或数字,可以在 change 事件回调参数中获取 | number | string | - |
input-width | 输入框宽度,默认单位为 px | number | string | 64rpx |
button-size | 按钮大小以及输入框高度,默认单位为 px | number | string | 56rpx |
decimal-length | 固定显示的小数位数 | number | string | - |
theme | 样式风格,可选值为 round | string | - |
placeholder | 输入框占位提示文字 | string | - |
integer | 是否只允许输入整数 | boolean | false |
disabled | 是否禁用步进器 | boolean | false |
disable-plus | 是否禁用增加按钮 | boolean | false |
disable-minus | 是否禁用减少按钮 | boolean | false |
disable-input | 是否禁用输入框 | boolean | false |
before-change | 输入值变化前的回调函数,返回 false 可阻止输入,支持返回 Promise | (value: number | string) => boolean | Promise<boolean> | false |
show-plus | 是否显示增加按钮 | boolean | true |
show-minus | 是否显示减少按钮 | boolean | true |
show-input | 是否显示输入框 | boolean | true |
long-press | 是否开启长按手势,开启后可以长按增加和减少按钮 | boolean | true |
allow-empty | 是否允许输入的值为空,设置为 true 后允许传入空字符串 | boolean | false |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当绑定值变化时触发的事件 | value: string, detail: { name: string } |
overlimit | 点击不可用的按钮时触发 | - |
plus | 点击增加按钮时触发 | - |
minus | 点击减少按钮时触发 | - |
focus | 输入框聚焦时触发 | event: Event |
blur | 输入框失焦时触发 | event: Event |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-stepper-background | var(--z-active-color) | - |
--z-stepper-button-icon-color | var(--z-text-color) | - |
--z-stepper-button-disabled-color | var(--z-background) | - |
--z-stepper-button-disabled-icon-color | var(--z-gray-5) | - |
--z-stepper-button-round-theme-color | var(--z-primary-color) | - |
--z-stepper-input-width | 64rpx | - |
--z-stepper-input-height | 56rpx | - |
--z-stepper-input-font-size | var(--z-font-size-md) | - |
--z-stepper-input-line-height | normal | - |
--z-stepper-input-text-color | var(--z-text-color) | - |
--z-stepper-input-disabled-text-color | var(--z-text-color-3) | - |
--z-stepper-input-disabled-background | var(--z-active-color) | - |
--z-stepper-radius | var(--z-radius-md) | - |