Stepper 数字输入框

规则

基础示例

const rule = {
    type: 'stepper',
    title: '数字输入',
    field: 'stepper',
    value: 6,
    props: {
        min: 5,
        max: 10
    }
}

Props 配置示例

设置数值范围

const rule = {
    type: 'stepper',
    title: '购买数量',
    field: 'quantity',
    value: 1,
    props: {
        min: 1,
        max: 100,
        step: 1,
    }
}

小数精度

const rule = {
    type: 'stepper',
    title: '折扣率',
    field: 'discount',
    value: 0.9,
    props: {
        min: 0,
        max: 1,
        step: 0.1,
        decimalLength: 1,
    }
}

禁用输入框

const rule = {
    type: 'stepper',
    title: '数量',
    field: 'quantity',
    value: 1,
    props: {
        disableInput: true,
        min: 1,
    }
}

圆角样式

const rule = {
    type: 'stepper',
    title: '数量',
    field: 'quantity',
    value: 1,
    props: {
        theme: 'round',
        min: 1,
    }
}

Events 事件示例

监听数值变化

const rule = {
    type: 'stepper',
    title: '购买数量',
    field: 'quantity',
    value: 1,
    props: {
        min: 1,
        max: 100,
    },
    on: {
        change: (value, detail) => {
            console.log('数值改变:', value, detail);
        },
        plus: () => {
            console.log('点击增加按钮');
        },
        minus: () => {
            console.log('点击减少按钮');
        },
        overlimit: () => {
            console.log('超出限制');
        },
    },
}

数值变化后计算总价

const rule = [
    {
        type: 'stepper',
        title: '单价',
        field: 'price',
        value: 0,
        props: {
            min: 0,
            step: 0.01,
            decimalLength: 2,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 自动计算总价
                const quantity = $inject.api.getValue('quantity') || 1;
                const total = value * quantity;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: 'stepper',
        title: '数量',
        field: 'quantity',
        value: 1,
        props: {
            min: 1,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 自动计算总价
                const price = $inject.api.getValue('price') || 0;
                const total = price * value;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: 'stepper',
        title: '总价',
        field: 'total',
        props: {
            disabled: true,
            decimalLength: 2,
        },
    },
]

完整配置项:Vant_Stepper

value :Number

Props

参数	说明	类型	默认值
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	32px
button-size	按钮大小以及输入框高度，默认单位为 px	number | string	28px
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