NumberBox 步进器

此组件带加减按钮的数字输入框。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 v-model 双向绑定 value 初始值，无需在回调中将返回的数值重新赋值给 value。

<template>
    <fu-number-box v-model="value" @change="handleChange"></fu-number-box>
</template>

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

    // data数据
    let value = ref(0);

    // methods方法
    const handleChange = (e) => {
        console.log('当前值为：', e);
    };
</script>

设置步长

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为 1。

注意：step 属性支持小数值，如 0.1、0.5、1.1等。

示例每次都会增加 0.1 或 减少 0.1 的步长。

<fu-number-box :step="0.1"></fu-number-box>

设置限制输入范围

通过 min 和 max 属性设置输入范围最小值和最大值。

<fu-number-box :min="1" :max="99"></fu-number-box>

设置禁用状态

通过 disabled、inputDisabled 属性设置禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值。

<!-- 禁用加减按钮 -->
<fu-number-box :disabled="true"></fu-number-box>

<!-- 禁用输入框 -->
<fu-number-box :inputDisabled="true"></fu-number-box>

API

NumberBox Props

属性名	说明	类型	默认值	可选值
value/v-model	输入框初始值	Number	1	-
step	每次加或减的值，支持小数值	Number	1	-
min	最小值	Number	0	-
max	最大值	Number	100	-
bgColor	输入框和按钮的背景颜色	String	#f5f5f5	-
color	输入框文字和加减按钮图标的颜色	String	#333333	-
disabled	是否禁用操作，禁用后无法加减	Boolean	false	-
inputDisabled	是否禁用输入框，禁用后无法输入值	Boolean	false	-
size	输入框文字和按钮字体大小	String｜Number	14	-

NumberBox Events

事件名	说明	回调参数
change	输入框内容发生变化时触发	() => void
input	输入框值改变时触发	() => void
blur	输入框失去焦点时触发	() => void
focus	输入框获得焦点时触发	() => void

NumberBox Slot

名称	说明
minus	自定义减号按钮
plus	自定义加号按钮
input	自定义输入框