InputNumber 数字输入框

规则

基础示例

const rule = {
    type: "InputNumber",
    field: "price",
    title: "价格",
    value: 1,
    props: {
        precision: 2
    },
}

Props 配置示例

设置数值范围

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

精度控制

const rule = {
    type: "InputNumber",
    field: "price",
    title: "商品价格",
    value: 99.99,
    props: {
        precision: 2,
        step: 0.01,
        placeholder: "请输入价格",
    },
}

控制按钮位置

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "数量",
    value: 1,
    props: {
        controlsPosition: "right",
        min: 1,
    },
}

禁用控制按钮

const rule = {
    type: "InputNumber",
    field: "score",
    title: "评分",
    value: 0,
    props: {
        controls: false,
        min: 0,
        max: 100,
        placeholder: "请输入0-100的分数",
    },
}

严格步进

const rule = {
    type: "InputNumber",
    field: "discount",
    title: "折扣率",
    value: 0.1,
    props: {
        step: 0.1,
        stepStrictly: true,
        precision: 1,
        min: 0,
        max: 1,
    },
}

Events 事件示例

监听数值变化和焦点事件

const rule = {
    type: "InputNumber",
    field: "price",
    title: "商品价格",
    value: 0,
    props: {
        min: 0,
        precision: 2,
        placeholder: "请输入价格",
    },
    on: {
        change: (value) => {
            console.log('数值改变:', value);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
    },
}

数值变化后计算总价

const rule = [
    {
        type: "InputNumber",
        field: "price",
        title: "单价",
        value: 0,
        props: {
            min: 0,
            precision: 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: "InputNumber",
        field: "quantity",
        title: "数量",
        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: "InputNumber",
        field: "total",
        title: "总价",
        props: {
            disabled: true,
            precision: 2,
        },
    },
]

完整配置项:Element_InputNumber

value :Number

Props

属性名	说明	类型	默认值
min	设置计数器允许的最小值	number	-Infinity
max	设置计数器允许的最大值	number	Infinity
step	计数器步长	number	1
stepStrictly	是否只能输入 step 的倍数	boolean	false
precision	数值精度	number	—
size	计数器尺寸	enum	default
readonly	原生 readonly 属性，是否只读	boolean	false
disabled	是否禁用状态	boolean	false
controls	是否使用控制按钮	boolean	true
controlsPosition	控制按钮位置	enum	—
name	等价于原生 input name 属性	string	—
ariaLabel	等价于原生 input aria-label 属性	string	—
placeholder	等价于原生 input placeholder 属性	string	—
id	等价于原生 input id 属性	string	—
valueOnClear	当输入框被清空时显示的值	number / null / enum	—
validateEvent	是否触发表单验证	boolean	true
label	等价于原生 input aria-label 属性	string	—

Events

名称	说明	类型
change	绑定值被改变时触发	Function
blur	在组件 Input 失去焦点时触发	Function
focus	在组件 Input 获得焦点时触发	Function

Slots

事件名	说明
decrease-icon	自定义输入框按钮减少图标
increase-icon	自定义输入框按钮增加图标
prefix	输入框头部内容
suffix	输入框尾部内容