Input 输入框

规则

基础示例

const rule = {
    type:"input",
    title:"商品名称",
    field:"goods_name",
    value:"iphone 7",
    props: {
        placeholder: "请输入商品名称",
        allowClear: true,
    }
}

Props 配置示例

文本输入框（text）

const rule = {
    type:"input",
    title:"用户名",
    field:"username",
    props: {
        placeholder: "请输入用户名",
        allowClear: true,
        size: "medium",
    }
}

文本域（textarea）

const rule = {
    type:"input",
    title:"商品描述",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "请输入商品描述",
        autoSize: { minRows: 3, maxRows: 6 },
        showWordLimit: true,
        maxLength: 200,
    }
}

密码输入框（password）

const rule = {
    type:"input",
    title:"密码",
    field:"password",
    props: {
        type: "password",
        placeholder: "请输入密码",
        allowClear: true,
    }
}

可清空输入框

const rule = {
    type:"input",
    title:"搜索关键词",
    field:"keyword",
    props: {
        placeholder: "请输入搜索关键词",
        allowClear: true,
    }
}

显示字数统计

const rule = {
    type:"input",
    title:"商品描述",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "请输入商品描述",
        maxLength: 200,
        showWordLimit: true,
    }
}

禁用和只读

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

Events 事件示例

监听输入变化和焦点事件

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

实时搜索（input 事件）

const rule = {
    type:"input",
    title:"搜索商品",
    field:"keyword",
    props: {
        placeholder: "请输入商品名称搜索",
        allowClear: true,
    },
    inject: true,
    on: {
        input: ($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,
        },
    },
]

完整配置项:arco-design_Input

value :String

Props

参数名	描述	类型	默认值	版本
size	输入框大小	'mini' | 'small' | 'medium' | 'large'	'medium'
allow-clear	是否允许清空输入框	boolean	false
disabled	是否禁用	boolean	false
readonly	是否为只读状态	boolean	false
error	是否为错误状态	boolean	false
placeholder	提示文字	string	-
max-length	输入值得最大长度，errorOnly 属性在 2.12.0 版本添加	number | { length: number; errorOnly?: boolean }	0
show-word-limit	是否显示字数统计	boolean	false
word-length	字符长度的计算方法	(value: string) => number	-
word-slice	字符截取方法，同 wordLength 一起使用	(value: string, maxLength: number) => string	-	2.12.0

Events

事件名	描述	参数
input	用户输入时触发	value: string
change	仅在输入框失焦或按下回车时触发	value: string
press-enter	用户按下回车时触发	-
clear	用户点击清除按钮时触发	-
focus	输入框获取焦点时触发	-
blur	输入框失去焦点时触发	-

<input-password> Props

参数名	描述	类型	默认值
invisible-button	是否显示可见按钮	boolean	true

<input-search> Props

参数名	描述	类型	默认值	版本
search-button	是否为后置按钮模式	boolean	false
loading	是否为加载中状态	boolean	false
disabled	是否禁用	boolean	false
size	输入框大小	'mini' | 'small' | 'medium' | 'large'	'medium'
button-text	搜索按钮的文字，使用后会替换原本的图标	string	-	2.16.0
button-props	搜索按钮的属性	object	-

<input-search> Events

事件名	描述	参数
search	单击搜索按钮时触发	value: string