InputNumber 数字输入框

规则

基础示例

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

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: 0,
    props: {
        min: 0,
        step: 0.01,
        placeholder: "请输入价格",
        clearable: true,
    }
}

禁用状态

const rule = {
    type: "InputNumber",
    field: "total",
    title: "总价",
    value: 0,
    props: {
        disabled: true,
    }
}

隐藏按钮

const rule = {
    type: "InputNumber",
    field: "score",
    title: "评分",
    value: 0,
    props: {
        showButton: false,
        min: 0,
        max: 100,
    }
}

Events 事件示例

监听数值变化

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "购买数量",
    value: 1,
    props: {
        min: 1,
        max: 100,
    },
    on: {
        'update:value': (value) => {
            console.log('数值改变:', value);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

联动计算总价

const rule = [
    {
        type: "InputNumber",
        field: "quantity",
        title: "购买数量",
        value: 1,
        props: {
            min: 1,
            max: 100,
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // 根据数量和单价计算总价
                const price = $inject.api.getValue('price') || 0;
                $inject.api.setValue('total', (price * value).toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "price",
        title: "单价",
        value: 0,
        props: {
            min: 0,
            step: 0.01,
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // 根据数量和单价计算总价
                const quantity = $inject.api.getValue('quantity') || 0;
                $inject.api.setValue('total', (value * quantity).toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "total",
        title: "总价",
        value: 0,
        props: {
            disabled: true,
        },
    },
]

完整配置项:naive-ui_InputNumber

value :Number

Props

名称	类型	默认值	说明
bordered	boolean	true	是否有边框
clearable	boolean	false	是否可清空
disabled	boolean	false	是否禁用
keyboard	{ ArrowUp?: boolean, ArrowDown?: boolean }	{}	控制允许的键盘操作，属性值设为 false 的时候会禁用对应的键盘操作
loading	boolean	undefined	是否展示加载图标，设为非 undefined 会占据空间
max	number	undefined	最大值
min	number	undefined	最小值
placeholder	string	'请输入'	提示信息
show-button	boolean	true	是否有按钮
size	'small' | 'medium' | 'large'	'medium'	输入框大小
step	number	1	每次改变步数，可以为小数
update-value-on-input	boolean	true	在输入的过程中，在输入值合法的情况下，是否改变值
validator	(value) => boolean	undefined	设置自定义验证
on-blur	(event: FocusEvent) => void	undefined	移除焦点的回调
on-clear	() => void	undefined	点击清空按钮时的回调
on-focus	(event: FocusEvent) => void	undefined	获取焦点的回调
on-update:value	(value: number | null) => void	undefined	组件值发生变化的回调