主题
Input 输入框
支持标题、必填标记、清除按钮及 uni-app 输入框的常用键盘配置。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 输入用户名 -->
<fui-input v-model="username" label="用户名" placeholder="请输入用户名" clearable />username 需在页面数据中声明。Vue 2 使用 value / input，Vue 3 使用 modelValue / update:modelValue。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| required | Boolean | 显示必填标记 | false |
| requiredColor | String | 必填标记颜色 | #FF2B2B |
| label | String | 左侧标题 | - |
| labelSize | Number / String | 标题字号，单位 rpx | 32 |
| labelColor | String | 标题颜色 | #333 |
| labelWidth | Number / String | 标题最小宽度，单位 rpx | 140 |
| clearable | Boolean | 是否显示清除按钮 | false |
| clearColor | String | 清除按钮颜色 | #CCCCCC |
| focus | Boolean | 是否获取焦点 | false |
| placeholder | String | 占位文字 | - |
| placeholderStyle | String | 占位文字样式 | - |
| name | String | 输入框名称 | - |
| value | Number / String | Vue 2 绑定值 | - |
| modelValue | Number / String | Vue 3 绑定值 | - |
| number | Boolean | 将输入值转换为数字，供 Vue 2 兼容使用 | false |
| type | String | uni-app input 的输入类型 | text |
| password | Boolean | 是否使用密码输入 | false |
| disabled | Boolean | 是否禁用输入及清除按钮 | false |
| disabledStyle | Boolean | 禁用时是否启用禁用样式 | false |
| readonly | Boolean | 是否只读，仍可使用清除按钮 | false |
| maxlength | Number / String | 最大长度，-1 不限制 | 140 |
| min | Number / String | 数字输入最小值 | - |
| max | Number / String | 数字输入最大值 | - |
| cursorSpacing | Number | 光标与键盘距离，单位 px | 0 |
| confirmType | String | 键盘确认键类型 | done |
| confirmHold | Boolean | 点击确认键后是否保持键盘 | false |
| cursor | Number | 聚焦时的光标位置 | -1 |
| selectionStart | Number | 选区起始位置 | -1 |
| selectionEnd | Number | 选区结束位置 | -1 |
| adjustPosition | Boolean | 键盘弹起时是否上推页面 | true |
| holdKeyboard | Boolean | 聚焦时点击页面是否保持键盘 | false |
| autoBlur | Boolean | 键盘收起时是否自动失焦 | false |
| alwaysEmbed | Boolean | iOS 微信小程序是否强制同层输入 | false |
| size | Number / String | 输入文字大小，单位 rpx | 32 |
| color | String | 输入文字颜色 | #333 |
| inputBorder | Boolean | 是否使用输入框整体边框 | false |
| isFillet | Boolean | 是否使用胶囊圆角 | false |
| radius | Number / String | 输入框圆角，单位 rpx | 8 |
| borderTop | Boolean | 是否显示上边线 | false |
| topLeft | Number / String | 上边线左侧偏移，单位 rpx | 0 |
| topRight | Number / String | 上边线右侧偏移，单位 rpx | 0 |
| borderBottom | Boolean | 是否显示下边线 | true |
| bottomLeft | Number / String | 下边线左侧偏移，单位 rpx | 32 |
| bottomRight | Number / String | 下边线右侧偏移，单位 rpx | 0 |
| borderColor | String | 边框颜色 | #EEEEEE |
| trim | Boolean | 是否去除输入值首尾空格 | true |
| textRight | Boolean | 是否右对齐，建议使用 textAlign | false |
| textAlign | String | 文字对齐：left、center、right | left |
| padding | Array | 容器内边距 | ['28rpx', '32rpx'] |
| backgroundColor | String | 背景色 | #FFFFFF |
| marginTop | Number / String | 上外边距，单位 rpx | 0 |
inputBorder 开启后不使用上下边线；isFillet 开启后不使用自定义 radius。数字范围属性在 number 或数字输入类型下有效。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| input | Vue 2 输入与双向绑定 | 输入值 |
| update:modelValue | Vue 3 双向绑定 | 输入值 |
| focus | 聚焦 | 原始事件，detail 包含 value，支持的平台可包含键盘高度 |
| blur | 失焦 | 原始事件，detail 包含 value |
| confirm | 点击键盘确认 | 原始事件，detail 包含 value |
| click | 点击输入区域 | { name } |
| keyboardheightchange | 键盘高度变化 | { height, duration } |
插槽和平台说明
left 插槽位于输入框左侧，默认插槽位于右侧。键盘和光标相关属性支持范围以 uni-app 对应平台能力为准；非 nvue 默认边框色可通过 --fui-color-border 调整。H5 焦点行为取决于浏览器，动态切换输入类型时可使用 v-if 切换整个组件。
插槽
| 插槽 | 说明 |
|---|---|
| default | 输入框右侧的自定义内容 |
| left | 左侧自定义内容 |