## Input 输入框通过鼠标或键盘输入字符 ### 基础用法 ::: demo ```html ``` ::: ### 禁用状态 ::: demo 通过 `disabled` 属性指定是否禁用 input 组件 ```html ``` ::: ### 带 icon 的输入框带有图标标记输入类型 ::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标。 ```html ``` ::: ### 文本域可调整大小，用于输入多行文本信息 ::: demo 通过将 `type` 属性的值指定为 textarea。 ```html ``` ::: ### 复合型输入框可前置或后置元素，一般为标签或按钮 ::: demo 可通过 slot 来指定在 input 中前置或者后置内容。 ```html ``` ::: ### 尺寸 ::: demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。 ```html

``` ::: ### 带输入建议根据输入内容提供对应的输入建议 ::: demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。 ```html

激活即列出输入建议

输入后匹配输入建议

``` ::: ### 自定义模板可自定义输入建议的显示 ::: demo ```html ``` ::: ### 远程搜索从服务端搜索数据 ::: demo ```html ``` ::: ### Input Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | type | 类型 | string | text/textarea | text | | value | 绑定值 | string, number | — | — | | maxlength | 最大输入长度 | number | — | — | | minlength | 最小输入长度 | number | — | — | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | large, small, mini | — | | 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 | - | -| | max | 原生属性，设置最大值 | * | - | - | | min | 原生属性，设置最小值 | * | - | - | | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false | | form | 原生属性 | string | - | - | ### Input Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | click | 点击 Input 内的图标时触发 | event | | blur | 在 Input 失去焦点时触发 | event | | focus | 在 Input 或得焦点时触发 | event | ### Autocomplete Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | value | 必填值输入绑定值 | string | — | — | | custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — | | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — | ### Autocomplete Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | select | 点击选中建议项时触发 | 选中建议项 |