mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
114 lines
4.3 KiB
Markdown
114 lines
4.3 KiB
Markdown
# uni-easyinput
|
||
|
||
## Instructions
|
||
|
||
组件名：uni-easyinput
|
||
|
||
代码块： uEasyinput
|
||
|
||
点击下载&安装
|
||
|
||
### Syntax
|
||
|
||
- 使用 `<uni-easyinput />`（或 `<uni-easyinput></uni-easyinput>`，当需要包裹子节点时）。
|
||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||
|
||
#### Properties
|
||
|
||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- | --- |
|
||
| value | String/ Number | - | - | 输入内容 |
|
||
| type | String | 见 type Options | text | 输入框的类型（默认text） |
|
||
| clearable | Boolean | - | true | 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容 |
|
||
| autoHeight | Boolean | - | false | 是否自动增高输入区域，type为textarea时有效 |
|
||
| placeholder | String | - | - | 输入框的提示文字 |
|
||
| placeholderStyle | String | - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd" |
|
||
| focus | Boolean | - | false | 是否自动获得焦点 |
|
||
| disabled | Boolean | - | false | 是否不可输入 |
|
||
| maxlength | Number | - | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |
|
||
| confirmType | String | - | done | 设置键盘右下角按钮的文字，仅在type="text"时生效 |
|
||
| clearSize | Number | - | 24 | 清除图标的大小，单位px |
|
||
| prefixIcon | String | - | - | 输入框头部图标 |
|
||
| suffixIcon | String | - | - | 输入框尾部图标 |
|
||
| trim | Boolean/String | 见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格 |
|
||
| inputBorder | Boolean | - | true | 是否显示input输入框的边框 |
|
||
| styles | Object | - | - | 样式自定义 |
|
||
| passwordIcon | Boolean | - | true | type=password 时，是否显示小眼睛图标 |
|
||
| adjust-position | Boolean | - | true | 弹起键盘时，是否上推页面，平台差异性与内置input组件一致 |
|
||
| primaryColor | String | - | #2979ff | 设置清除按钮focus时的颜色 |
|
||
| cursorSpacing | Number | - | 0 | 指定光标与键盘的距离，单位 px 。取 textarea/input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。详见 textarea / input |
|
||
|
||
#### Events
|
||
|
||
| 事件称名 | 说明 | 返回值 | 兼容说明 |
|
||
| --- | --- | --- | --- |
|
||
| @input | 输入框内容发生变化时触发 | - | |
|
||
| @clear | 点击右侧叉号图标时触发 | - | 1.1.0新增 |
|
||
| @focus | 输入框获得焦点时触发 | - | |
|
||
| @blur | 输入框失去焦点时触发 | - | |
|
||
| @confirm | 点击完成按钮时触发 | - | |
|
||
| @iconClick | 点击图标时触发 | prefix/suffix | |
|
||
| @change | 仅在输入框失去焦点或用户按下回车时触发 | | 1.1.0新增 |
|
||
| @keyboardheightchange | 键盘高度发生变化时触发 | | 1.1.6新增 |
|
||
|
||
#### Platform Compatibility
|
||
|
||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html`
|
||
|
||
### Examples
|
||
|
||
### Example (Example 1)
|
||
|
||
```vue
|
||
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
|
||
```
|
||
|
||
### Example (Example 2)
|
||
|
||
```html
|
||
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
|
||
```
|
||
|
||
### Example (Example 3)
|
||
|
||
```vue
|
||
<!-- 输入框头部图标 -->
|
||
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||
<!-- 展示输入框尾部图标 -->
|
||
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||
```
|
||
|
||
### Example (Example 4)
|
||
|
||
```html
|
||
<!-- 输入框头部图标 -->
|
||
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||
<!-- 展示输入框尾部图标 -->
|
||
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||
```
|
||
|
||
### Example (Example 5)
|
||
|
||
```vue
|
||
<uni-easyinput>
|
||
<template #right>
|
||
<view>密码</view>
|
||
</template>
|
||
</uni-easyinput>
|
||
```
|
||
|
||
### Example (Example 6)
|
||
|
||
```html
|
||
<uni-easyinput>
|
||
<template #right>
|
||
<view>密码</view>
|
||
</template>
|
||
</uni-easyinput>
|
||
```
|
||
|
||
Reference:
|
||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html)
|
||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=easyinput)
|
||
- [Local Example](examples/uni-ui/uni-easyinput.vue)
|