InputNumber

Rules

Basic Example

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

Props Configuration Examples

Set Minimum and Maximum Values

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "Purchase Quantity",
    value: 1,
    props: {
        min: 1,
        max: 100,
        step: 1,
    }
}

Set Step and Precision

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Product Price",
    value: 0,
    props: {
        min: 0,
        step: 0.01,
        placeholder: "Enter price",
        clearable: true,
    }
}

Disabled State

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

Hide Buttons

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

Events Examples

Handle Value Changes

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "Purchase Quantity",
    value: 1,
    props: {
        min: 1,
        max: 100,
    },
    on: {
        'update:value': (value) => {
            console.log('Value changed:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

Linkage Calculate Total Price

const rule = [
    {
        type: "InputNumber",
        field: "quantity",
        title: "Purchase Quantity",
        value: 1,
        props: {
            min: 1,
            max: 100,
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // Calculate total price
                const price = $inject.api.getValue('price') || 0;
                $inject.api.setValue('total', (price * value).toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "price",
        title: "Unit Price",
        value: 0,
        props: {
            min: 0,
            step: 0.01,
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // Calculate total price
                const quantity = $inject.api.getValue('quantity') || 0;
                $inject.api.setValue('total', (value * quantity).toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "total",
        title: "Total Price",
        value: 0,
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: naive-ui_InputNumber

value :Number

Props

Name	Type	Default Value	Description
bordered	boolean	true	Whether it has border
clearable	boolean	false	Whether it can be cleared
disabled	boolean	false	Whether disabled
keyboard	{ ArrowUp?: boolean, ArrowDown?: boolean }	{}	Control allowed keyboard operations, setting property value to false will disable corresponding keyboard operation
loading	boolean	undefined	Whether to show loading icon, setting to non undefined will occupy space
max	number	undefined	Maximum value
min	number	undefined	Minimum value
placeholder	string	'请输入'	Hint message
show-button	boolean	true	Whether it has buttons
size	'small' | 'medium' | 'large'	'medium'	Input size
step	number	1	Step for each change, can be decimal
update-value-on-input	boolean	true	Whether to change value during input when input value is valid
validator	(value) => boolean	undefined	Set custom validation
on-blur	(event: FocusEvent) => void	undefined	Callback when losing focus
on-clear	() => void	undefined	Callback when clicking clear button
on-focus	(event: FocusEvent) => void	undefined	Callback when gaining focus
on-update:value	(value: number | null) => void	undefined	Callback when component value changes