Input

Rules

Basic Example

const rule = {
    type:"input",
    title:"Product Name",
    field:"goods_name",
    value:"iphone 7",
    col:{
    	span:12,
    	labelWidth:150
    },
    props: {
        type: "text",
    },
    validate:[
        { required: true, message: 'Enter goods_name', trigger: 'blur' },
    ],
}

Props Configuration Examples

Clearable Input

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

Textarea

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "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",
    },
}

Disabled and Readonly

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

Input Length Limit

const rule = {
    type:"input",
    title:"Phone Number",
    field:"phone",
    props: {
        placeholder: "Enter 11-digit phone number",
        maxlength: 11,
        minlength: 11,
        clearable: true,
    },
    validate:[
        { required: true, message: 'Enter phone number', trigger: 'blur' },
    ],
}

Events Examples

Listen to Input Change and Focus Events

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

Real-time Search (change event)

const rule = {
    type:"input",
    title:"Search Products",
    field:"keyword",
    props: {
        placeholder: "Enter product name to search",
        clearable: true,
        prefixIcon: "Search",
    },
    inject: true,
    on: {
        change: ($inject, value) => {
            // Real-time search: automatically trigger search as you type
            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: "Enter product name",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // When the product name changes, automatically generate the 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,
        },
    },
]

Slots Examples

const rule = {
    type:"input",
    title:"Website",
    field:"url",
    props: {
        placeholder: "Enter website",
    },
    children: [
        {
            type: 'div',
            slot: 'prefix',
            children: ['https://']
        },
        {
            type: 'div',
            slot: 'suffix',
            children: ['.com']
        },
    ]
}

Complete configuration items: Element_Input

value :String

Props

Parameter	Description	Type	Optional Values	Default Value
type	Type	string	text, textarea and other native input type values	text
maxlength	Native attribute, maximum input length	number	—	—
minlength	Native attribute, minimum input length	number	—	—
placeholder	Input placeholder text	string	—	—
clearable	Whether it can be cleared	boolean	—	false
disabled	Disabled	boolean	—	false
size	Input size, only effective when type!="textarea"	string	medium / small / mini	—
prefixIcon	Input header icon	string	—	—
suffixIcon	Input footer icon	string	—	—
rows	Number of input rows, only effective for type="textarea"	number	—	2
autosize	Auto-resize content height, only effective for type="textarea", can pass object, e.g., { minRows: 2, maxRows: 6 }	boolean / object	—	false
autocomplete	Native attribute, auto-complete	string	on, off	off
autoComplete	Deprecated in next major version	string	on, off	off
name	Native attribute	string	—	—
readonly	Native attribute, whether readonly	boolean	—	false
max	Native attribute, set maximum value	—	—	—
min	Native attribute, set minimum value	—	—	—
step	Native attribute, set legal number interval for input field	—	—	—
resize	Control whether it can be resized by user	string	none, both, horizontal, vertical	—
autofocus	Native attribute, auto focus	boolean	true, false	false
form	Native attribute	string	—	—
label	Label text associated with input	string	—	—
tabindex	Input tabindex	string	-	-
validateEvent	Whether to trigger form validation on input	boolean	-	true

Events

Event Name	Description	Callback Parameters
blur	Triggered when Input loses focus	(event: Event)
focus	Triggered when Input gains focus	(event: Event)
change	Triggered when Input value changes	(value: string | number)
clear	Triggered when clicking the clear button generated by clearable attribute	—

Slots

Slot Name	Description
prefix	Input header content, only effective for non type="textarea"
suffix	Input footer content, only effective for non type="textarea"
prepend	Input prepend content, only effective for non type="textarea"
append	Input append content, only effective for non type="textarea"