Input 输入框

规则

基础示例

const rule = {
    type:"input",
    title:"商品名称",
    field:"goods_name",
    value:"iphone 7",
    col:{
    	span:12,
    	labelWidth:150
    },
    props: {
        type: "text",
    },
    validate:[
        { required: true, message: '请输入goods_name', trigger: 'blur' },
    ],
}

Props 配置示例

可清空输入框

const rule = {
    type:"input",
    title:"用户名",
    field:"username",
    props: {
        placeholder: "请输入用户名",
        clearable: true,
        prefixIcon: "User",
        suffixIcon: "Search",
    },
}

文本域（Textarea）

const rule = {
    type:"input",
    title:"商品描述",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "请输入商品描述",
        rows: 4,
        autosize: { minRows: 3, maxRows: 6 },
        resize: "vertical",
    },
}

密码输入框（Password）

const rule = {
    type:"input",
    title:"商品描述",
    field:"description",
    props: {
        type: "password",
    },
}

禁用和只读

const rule = {
    type:"input",
    title:"订单号",
    field:"order_no",
    value:"ORD20240101001",
    props: {
        disabled: true,
        // 或使用 readonly: true,
    },
}

输入长度限制

const rule = {
    type:"input",
    title:"手机号",
    field:"phone",
    props: {
        placeholder: "请输入11位手机号",
        maxlength: 11,
        minlength: 11,
        clearable: true,
    },
    validate:[
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],
}

Events 事件示例

监听输入变化和焦点事件

const rule = {
    type:"input",
    title:"搜索关键词",
    field:"keyword",
    props: {
        placeholder: "请输入搜索关键词",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('输入值改变:', value);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
        clear: () => {
            console.log('清空输入');
        },
    },
}

实时搜索（change 事件）

const rule = {
    type:"input",
    title:"搜索商品",
    field:"keyword",
    props: {
        placeholder: "请输入商品名称搜索",
        clearable: true,
        prefixIcon: "Search",
    },
    inject: true,
    on: {
        change: ($inject, value) => {
            // 实时搜索：输入时自动触发搜索
            if (value && value.length >= 2) {
                // 调用搜索接口
                searchProducts(value).then(res => {
                    // 更新搜索结果
                    $inject.api.setValue('searchResults', res.data);
                });
            }
        },
    },
}

联动更新其他字段（change 事件）

const rule = [
    {
        type:"input",
        title:"商品名称",
        field:"goods_name",
        props: {
            placeholder: "请输入商品名称",
        },
        inject: true,
        on: {
            change: ($inject, 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:"商品编码",
        field:"goods_code",
        props: {
            disabled: true,
        },
    },
]

Slots 插槽示例

const rule = {
    type:"input",
    title:"网址",
    field:"url",
    props: {
        placeholder: "请输入网址",
    },
    children: [
        {
            type: 'div',
            slot: 'prefix',
            children: ['https://']
        },
        {
            type: 'div',
            slot: 'suffix',
            children: ['.com']
        },
    ]
}

完整配置项:Element_Input

value :String

Props

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他 原生 input 的 type 值	text
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 type!="textarea" 时有效	string	medium / small / mini	—
prefixIcon	输入框头部图标	string	—	—
suffixIcon	输入框尾部图标	string	—	—
rows	输入框行数，只对 type="textarea" 有效	number	—	2
autosize	自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
autocomplete	原生属性，自动补全	string	on, off	off
autoComplete	下个主版本弃用	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	-	-
validateEvent	输入时是否触发表单的校验	boolean	-	true

Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	在 Input 值改变时触发	(value: string | number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—

Slots

插槽名	说明
prefix	输入框头部内容，只对非 type="textarea" 有效
suffix	输入框尾部内容，只对非 type="textarea" 有效
prepend	输入框前置内容，只对非 type="textarea" 有效
append	输入框后置内容，只对非 type="textarea" 有效