``` ::: ### 尺寸 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。 :::demo ```html ``` ::: ### 复合型输入框 可前置或后置元素，一般为标签或按钮。可通过 slot 来指定在 input 中前置或者后置内容。 :::demo ```html ``` ::: ### 文本域 用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。文本域高度可通过 `rows` 属性控制 :::demo ```html ``` ::: ### 可自适应文本高度的文本域 通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。 :::demo ```html ``` ::: ### 带 icon 的输入框 可前置或后置元素，一般为标签或按钮。可通过 slot 来指定在 input 中前置或者后置内容。 :::demo ```html ``` ::: ### Input Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | type | 类型 | string | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text | | value | 绑定值 | string / number | — | — | | maxlength | 原生属性，最大输入长度 | number | — | — | | minlength | 原生属性，最小输入长度 | number | — | — | | placeholder | 输入框占位文本 | string | — | — | | clearable | 是否可清空 | boolean | — | false | | disabled | 禁用 | boolean | — | false | | size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | — | | prefix-icon | 输入框头部图标 | string | — | — | | suffix-icon | 输入框尾部图标 | string | — | — | | rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 | | autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false | | auto-complete | 原生属性，自动补全 | 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 | - | - | ### Input Slots | name | 说明 | |------|--------| | prefix | 输入框头部内容，只对 `type="text"` 有效 | | suffix | 输入框尾部内容，只对 `type="text"` 有效 | | prepend | 输入框前置内容，只对 `type="text"` 有效 | | append | 输入框后置内容，只对 `type="text"` 有效 | ### Input Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | blur | 在 Input 失去焦点时触发 | (event: Event) | | focus | 在 Input 获得焦点时触发 | (event: Event) | | change | 在 Input 值改变时触发 | (value: string \| number) | | clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — | ### Input Methods | 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | focus | 使 input 获取焦点 | — | | blur | 使 input 失去焦点 | — | | select | 选中 input 中的文字 | — | ### Autocomplete Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | value-key | 输入建议对象中用于显示的键名 | string | — | value | | value | 必填值，输入绑定值 | string | — | — | | debounce | 获取输入建议的去抖延时 | number | — | 300 | | placement | 菜单弹出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start | | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — | | popper-class | Autocomplete 下拉列表的类名 | string | — | — | | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true | | name | 原生属性 | string | — | — | | select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false | | label | 输入框关联的label文字 | string | — | — | | prefix-icon | 输入框头部图标 | string | — | — | | suffix-icon | 输入框尾部图标 | string | — | — | ### Autocomplete Slots | name | 说明 | |------|--------| | prefix | 输入框头部内容 | | suffix | 输入框尾部内容 | | prepend | 输入框前置内容 | | append | 输入框后置内容 | ### Autocomplete Scoped Slot | name | 说明 | |------|--------| | — | 自定义输入建议，参数为 { item } | ### Autocomplete Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | select | 点击选中建议项时触发 | 选中建议项 | ### Autocomplete Methods | 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | focus | 使 input 获取焦点 | - |