Input 输入框

规则

基础示例

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

Props 配置示例

文本域（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:"username",
    props: {
        placeholder: "请输入用户名",
        allowClear: true,
        prefix: "UserOutlined",
    },
}

显示字数统计

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

前后缀标签

const rule = {
    type:"input",
    title:"价格",
    field:"price",
    props: {
        addonBefore: "¥",
        addonAfter: "元",
        placeholder: "请输入价格",
    },
}

禁用状态

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

Events 事件示例

监听输入变化和焦点事件

const rule = {
    type:"input",
    title:"搜索关键词",
    field:"keyword",
    props: {
        placeholder: "请输入搜索关键词",
        allowClear: true,
    },
    on: {
        change: (e) => {
            console.log('输入值改变:', e.target.value);
        },
        pressEnter: (e) => {
            console.log('按下回车:', e.target.value);
        },
    },
}

实时搜索（change 事件）

const rule = {
    type:"input",
    title:"搜索商品",
    field:"keyword",
    props: {
        placeholder: "请输入商品名称搜索",
        allowClear: true,
        prefix: "SearchOutlined",
    },
    inject: true,
    on: {
        change: ($inject, e) => {
            // 实时搜索：输入时自动触发搜索
            const value = e.target.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, e) => {
                // 当商品名称改变时，自动生成商品编码
                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:"商品编码",
        field:"goods_code",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Ant-design-vue_Input

value :String

Props

参数	说明	类型	默认值
addonAfter	带标签的 input，设置后置标签	string|slot
addonBefore	带标签的 input，设置前置标签	string|slot
allowClear	可以点击清除图标删除内容	boolean
bordered	是否有边框	boolean	true
clearIcon	自定义清除图标 （allowClear 为 true 时生效）	slot	<CloseCircleFilled />
defaultValue	输入框默认内容	string
disabled	是否禁用状态，默认为 false	boolean	false
id	输入框的 id	string
maxlength	最大长度	number
prefix	带有前缀图标的 input	string|slot
showCount	是否展示字数	boolean	false
status	设置校验状态	'error' | 'warning'	-
size	控件大小。注：标准表单内的输入框大小限制为 middle。可选 large middle small	string	-
suffix	带有后缀图标的 input	string|slot
type	声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 <a-textarea /> 代替 type="textarea")。	string	text

Input 事件

事件名称	说明	回调参数
change	输入框内容变化时的回调	function(e)
pressEnter	按下回车的回调	function(e)

TextArea

参数	说明	类型	默认值
allowClear	可以点击清除图标删除内容	boolean
autosize	自适应内容高度，可设置为 `true	false 或对象：{ minRows: 2, maxRows: 6 }`	boolean|object
showCount	是否展示字数	boolean	false

TextArea 事件

事件名称	说明	回调参数
pressEnter	按下回车的回调	function(e)

Textarea 的其他属性和浏览器自带的 textarea 一致。

Input.Search

参数	说明	类型	默认值
enterButton	是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。	boolean|slot	false
loading	搜索 loading	boolean

Input.Search 事件

事件名称	说明	回调参数
search	点击搜索或按下回车键时的回调	function(value, event)

其余属性和 Input 一致。

Input.Password

参数	说明	类型	默认值
visible	密码是否可见	boolean	false
iconRender	自定义切换按钮	slot	-
visibilityToggle	是否显示切换按钮或者控制密码显隐	boolean	true