## Input 输入框通过鼠标或键盘输入字符 ### 基础用法 ::: demo ```html ``` ::: ### 禁用状态 ::: demo 通过 `disabled` 属性指定是否禁用 input 组件 ```html ``` ::: ### 带 icon 的输入框带有图标标记输入类型 ::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标，可以通过 `on-icon-click` 钩子函数来在点击图标后执行需要的逻辑。 ```html ``` ::: ### 文本域用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。 ::: demo 文本域高度可通过 `rows` 属性控制 ```html ``` ::: ### 可自适应文本高度的文本域通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。 ::: demo ```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 | — | — | | readonly | 原生属性，是否只读 | boolean | — | false | | max | 原生属性，设置最大值 | — | — | — | | min | 原生属性，设置最小值 | — | — | — | | step | 原生属性，设置输入字段的合法数字间隔 | — | — | — | | resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — | | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false | | form | 原生属性 | string | — | — | | on-icon-click | 点击 Input 内的图标的钩子函数 | function | — | — | ### Input Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | click | 点击 Input 内的图标时触发 | (event: Event) | | blur | 在 Input 失去焦点时触发 | (event: Event) | | focus | 在 Input 获得焦点时触发 | (event: Event) | | change | 在 Input 值改变时触发 | (value: string \| number) | ### Autocomplete Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | props | 配置选项，具体见下表 | object | — | — | | value | 必填值输入绑定值 | string | — | — | | custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — | | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — | | popper-class | Autocomplete 下拉列表的类名 | string | — | — | | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true | | on-icon-click | 点击图标的回调函数 | function | — | — | | icon | 输入框尾部图标 | string | — | — | | name | 原生属性 | string | — | — | ### Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----------------- | ------ | ------ | ------ | | value | 指定选项的值为选项对象的某个属性值 | string | — | value | | label | 指定选项标签为选项对象的某个属性值 | string | — | value | ### Autocomplete Events | 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | select | 点击选中建议项时触发 | 选中建议项 | ### Methods | 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | focus | 使 input 获取焦点 | - |