Input 输入框

规则

基础示例

const rule = {
    type:"input",
    title:"商品名称",
    field:"goods_name",
    value:"iphone 7",
    props: {
        disabled: true,
    }
}

Props 配置示例

文本输入框（text）

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

文本域（textarea）

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

密码输入框（password）

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

可清空输入框

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

显示字数统计

const rule = {
    type:"input",
    title:"商品描述",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "请输入商品描述",
        maxlength: 200,
        showCount: 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: "请输入搜索关键词",
        clearable: true,
    },
    on: {
        'update:value': (value) => {
            console.log('输入值改变:', value);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
        clear: () => {
            console.log('清空输入');
        },
    },
}

实时搜索（update:value 事件）

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

联动更新其他字段（update:value 事件）

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

完整配置项:naive-ui_Input

value :String

Props

名称	类型	默认值	说明	版本
autofocus	boolean	false	是否自动获取焦点
autosize	boolean | { minRows?: number, maxRows?: number }	false	自适应内容高度，只对 type="textarea" 有效，可传入对象，如 { minRows: 1, maxRows: 3 }
clearable	boolean	false	是否可清空
disabled	boolean	false	是否禁用
input-props	HTMLInputAttributes	undefined	Input 组建内部 input 元素的属性，对 pair 类型不生效，在这里查看原生属性。注意：input-props 不会覆盖内部 input 元素的已经存在的属性（除了 type）
loading	boolean	undefined	是否展示加载图标，设为非 undefined 会占据空间
maxlength	number	undefined	最大输入长度
minlength	number	undefined	最小输入长度
pair	boolean	false	是否输入成对的值
passively-activated	boolean	false	是否被动激活输入框
placeholder	string | [string, string]	undefined	文本输入的占位符。如果 pair 是 true，placeholder是一个数组
readonly	boolean	false	是否只读
round	boolean	false	输入框是否圆角
rows	number	3	输入框行数，对 type="textarea" 有效
separator	string	undefined	成对输入框中间的分隔符
show-count	boolean	false	是否显示字数统计
show-password-on	'click' | 'mousedown'	undefined	显示密码的时机
size	'small' | 'medium' | 'large'	'medium'	输入框尺寸
status	'success' | 'warning' | 'error'	undefined	验证状态	2.25.0
type	'text' | 'password' | 'textarea'	'text'	输入框类型
on-blur	() => void	undefined	输入框失去焦点时触发
on-change	(value: string | [string, string]) => void	undefined	原生 change 事件触发时触发
on-clear	() => void	undefined	输入框点击清空按钮时触发
on-focus	() => void	undefined	输入框获得焦点时触发
on-input	(value: string | [string, string]) => void	undefined	输入框在用户输入时触发
on-update:value	(value: string | [string, string]) => void	undefined	输入框值 change 时触发