## 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 API | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | type | 同原生的 input 的 type 属性,如果为textarea则显示为extarea | string | — | — | | value | 绑定值 | string, number | — | — | | maxlength | 最大输入长度 | number | — | — | | minlength | 最小输入长度 | number | — | — | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | size | 输入框尺寸 | string | large, small, mini | — | | icon | 输入框尾部图标 | string | — | — | | number | 指定model值为number类型 | boolean | — | false | ### Autocomplete API | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | placeholder | 输入框占位文本 | string | — | — | | disabled | 禁用 | boolean | — | false | | value | 必填值输入绑定值 | string | — | — | | custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — | | fetch-suggestions | 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |