Input

Rules

Basic Example

const rule = {
    type:"input",
    title:"Product Name",
    field:"goods_name",
    value:"iphone 7",
    props: {
        type: "text",
    },
    validate:[
        { required: true, message: 'Please enter product name', trigger: 'blur' },
    ],
}

Props Configuration Examples

Textarea

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

Password Input

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "password",
    },
}

Clearable Input

const rule = {
    type:"input",
    title:"Username",
    field:"username",
    props: {
        placeholder: "Please enter username",
        allowClear: true,
        prefix: "UserOutlined",
    },
}

Show Character Count

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

Prefix and Suffix Labels

const rule = {
    type:"input",
    title:"Price",
    field:"price",
    props: {
        addonBefore: "¥",
        addonAfter: "Yuan",
        placeholder: "Please enter price",
    },
}

Disabled State

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

Events Examples

Listen to Input Changes and Focus Events

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Please enter search keyword",
        allowClear: true,
    },
    on: {
        change: (e) => {
            console.log('Input value changed:', e.target.value);
        },
        pressEnter: (e) => {
            console.log('Pressed Enter:', e.target.value);
        },
    },
}

Real-time Search (Change Event)

const rule = {
    type:"input",
    title:"Search Product",
    field:"keyword",
    props: {
        placeholder: "Please enter product name to search",
        allowClear: true,
        prefix: "SearchOutlined",
    },
    inject: true,
    on: {
        change: ($inject, e) => {
            // Real-time search: automatically trigger search while typing
            const value = e.target.value;
            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 (Change Event)

const rule = [
    {
        type:"input",
        title:"Product Name",
        field:"goods_name",
        props: {
            placeholder: "Please enter product name",
        },
        inject: true,
        on: {
            change: ($inject, e) => {
                // When product name changes, automatically generate a product code
                const value = e.target.value;
                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: Ant-design-vue_Input

value :String

Props

Parameter	Description	Type	Default
addonAfter	Input with label, set suffix label	string|slot
addonBefore	Input with label, set prefix label	string|slot
allowClear	Can click clear icon to delete content	boolean
bordered	Whether to have border	boolean	true
clearIcon	Custom clear icon (effective when allowClear is true)	slot	<CloseCircleFilled />
defaultValue	Default content of input box	string
disabled	Whether disabled, default is false	boolean	false
id	id of input box	string
maxlength	Maximum length	number
prefix	Input with prefix icon	string|slot
showCount	Whether to display character count	boolean	false
status	Set validation status	'error' | 'warning'	-
size	Control size. Note: Input box size in standard form is limited to middle. Options: large middle small	string	-
suffix	Input with suffix icon	string|slot
type	Declare input type, same as native input tag's type attribute, see: MDN(Please use <a-textarea /> instead of type="textarea").	string	text

Input Events

Event Name	Description	Callback Parameters
change	Callback when input content changes	function(e)
pressEnter	Callback when pressing Enter	function(e)

TextArea

Parameter	Description	Type	Default
allowClear	Can click clear icon to delete content	boolean
autosize	Auto-adapt content height, can be set to `true	falseor object:{ minRows: 2, maxRows: 6 }`	boolean|object
showCount	Whether to display character count	boolean	false

TextArea Events

Event Name	Description	Callback Parameters
pressEnter	Callback when pressing Enter	function(e)

Other properties of Textarea are consistent with browser's native textarea.

Input.Search

Parameter	Description	Type	Default
enterButton	Whether to have confirm button, can be set to button text. This property conflicts with addon.	boolean|slot	false
loading	Search loading	boolean

Input.Search Events

Event Name	Description	Callback Parameters
search	Callback when clicking search or pressing Enter	function(value, event)

Other properties are consistent with Input.

Input.Password

Parameter	Description	Type	Default
visible	Whether password is visible	boolean	false
iconRender	Custom toggle button	slot	-
visibilityToggle	Whether to show toggle button or control password visibility	boolean	true