Input

Rules

Basic Example

const rule = {
    type:"input",
    title:"Product Name",
    field:"goods_name",
    value:"iphone 7",
    props: {
        disabled: true,
    }
}

Props Configuration Examples

Text Input (text)

const rule = {
    type:"input",
    title:"Username",
    field:"username",
    props: {
        placeholder: "Enter username",
        clearable: true,
    }
}

Textarea

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "Enter product description",
        rows: 4,
        autosize: { minRows: 3, maxRows: 6 },
    }
}

Password Input (password)

const rule = {
    type:"input",
    title:"Password",
    field:"password",
    props: {
        type: "password",
        placeholder: "Enter password",
        showPasswordOn: "click",
        clearable: true,
    }
}

Clearable Input

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Enter search keyword",
        clearable: true,
    }
}

Show Character Count

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "Enter product description",
        maxlength: 200,
        showCount: true,
    }
}

Disabled and Readonly

const rule = {
    type:"input",
    title:"Order Number",
    field:"order_no",
    value:"ORD20240101001",
    props: {
        disabled: true,
        // or use readonly: true,
    }
}

Events Examples

Handle Input and Focus Events

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Enter search keyword",
        clearable: true,
    },
    on: {
        'update:value': (value) => {
            console.log('Input value changed:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
        clear: () => {
            console.log('Input cleared');
        },
    },
}

Real-time Search (update:value event)

const rule = {
    type:"input",
    title:"Search Products",
    field:"keyword",
    props: {
        placeholder: "Enter product name to search",
        clearable: true,
    },
    inject: true,
    on: {
        'update:value': ($inject, value) => {
            // Auto-search as user types
            if (value && value.length >= 2) {
                // Call search API
                searchProducts(value).then(res => {
                    // Update search results
                    $inject.api.setValue('searchResults', res.data);
                });
            }
        },
    },
}

Linkage Update Other Fields (update:value event)

const rule = [
    {
        type:"input",
        title:"Product Name",
        field:"goods_name",
        props: {
            placeholder: "Enter product name",
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // Auto-generate product code
                if (value) {
                    const code = 'GD' + value.substring(0, 3).toUpperCase() + Date.now().toString().slice(-6);
                    $inject.api.setValue('goods_code', code);
                }
            },
        },
    },
    {
        type:"input",
        title:"Product Code",
        field:"goods_code",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: naive-ui_Input

value :String

Props

Name	Type	Default Value	Description	Version
autofocus	boolean	false	Whether to auto focus
autosize	boolean | { minRows?: number, maxRows?: number }	false	Auto-resize content height, only effective for type="textarea", can pass object, e.g. { minRows: 1, maxRows: 3 }
clearable	boolean	false	Whether it can be cleared
disabled	boolean	false	Whether disabled
input-props	HTMLInputAttributes	undefined	Properties of the input element inside Input component, not effective for pair type, view native properties here. Note: input-props will not override existing properties of the internal input element (except type)
loading	boolean	undefined	Whether to show loading icon, setting to non undefined will occupy space
maxlength	number	undefined	Maximum input length
minlength	number	undefined	Minimum input length
pair	boolean	false	Whether to input paired values
passively-activated	boolean	false	Whether to passively activate input box
placeholder	string | [string, string]	undefined	Placeholder text for input. If pair is true, placeholder is an array
readonly	boolean	false	Whether readonly
round	boolean	false	Whether input box is rounded
rows	number	3	Number of input rows, effective for type="textarea"
separator	string	undefined	Separator between paired input boxes
show-count	boolean	false	Whether to show character count
show-password-on	'click' | 'mousedown'	undefined	When to show password
size	'small' | 'medium' | 'large'	'medium'	Input size
status	'success' | 'warning' | 'error'	undefined	Validation status	2.25.0
type	'text' | 'password' | 'textarea'	'text'	Input type
on-blur	() => void	undefined	Callback triggered when input loses focus
on-change	(value: string | [string, string]) => void	undefined	Callback triggered when native change event fires
on-clear	() => void	undefined	Callback triggered when clicking clear button
on-focus	() => void	undefined	Callback triggered when input gains focus
on-input	(value: string | [string, string]) => void	undefined	Callback triggered when user inputs
on-update:value	(value: string | [string, string]) => void	undefined	Callback triggered when input value changes