# Input 输入框
概述
Input 输入框，该组件是对原生input组件的增强，内置了常用布局样式，同时包含 input 所有功能。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiInput from "@/components/firstui/fui-input/fui-input.vue"
export default {
components:{
fuiInput
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 borderTop 属性设置是否显示上边框，bottomLeft 属性设置下边框left值。
<fui-input borderTop placeholder="请输入用户名"></fui-input>
<fui-input :bottomLeft="0" placeholder="请输入手机号码" maxlength="11"></fui-input>
1
2
2
带标题
通过 label 属性设置标题。
<fui-input label="标题" borderTop placeholder="这是一个输入框"></fui-input>
<fui-input label="标题文字" :bottomLeft="0" placeholder="请输入文本"></fui-input>
1
2
2
必填项
通过 required 属性设置是否显示必填图标。
<fui-input required label="标题" borderTop placeholder="请输入文本"></fui-input>
<fui-input required label="标题文字" :bottomLeft="0" placeholder="请输入文本内容"></fui-input>
1
2
2
使用v-model
双向绑定。
<fui-input label="标题" :bottomLeft="0" borderTop placeholder="请输入文本" v-model="text"></fui-input>
1
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 输入框右侧定义显示内容 |
| left | 输入框左侧自定义显示内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| 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 | 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。 |
| placeholder | String | 输入框为空时占位符 | - | - |
| placeholderStyle | String | 指定 placeholder 的样式 | - | - |
| name | String | 输入框名称 | - | - |
| value | Number,String | 输入框值，vue2使用 | - | - |
| modelValue | Number,String | 输入框值，vue3vue2请忽略 | - | - |
| number V1.5.0+ | Boolean | 输入框值做Number转化，vue2兼容写法，vue3可忽略 | false | 兼容v-model.number 在小程序平台值未转化成Number类型的问题 |
| type | String | 输入框类型，参考官方input (opens new window)组件type属性 | text | H5暂未支持动态切换，请使用 v-if 进行整体切换 |
| password | Boolean | 是否是密码类型 | false | H5和App写此属性时，type失效 |
| disabled | Boolean | 是否禁用，清除按钮一并失效 | false | - |
| disabledStyle V2.1.0+ | Boolean | 是否启用禁用状态下的样式，与正常输入框样式略有区别，仅disabled为true时有效 | false | - |
| readonly V1.8.0+ | Boolean | 是否只读，保留清除按钮使用，优先级高于disabled | false | - |
| maxlength | Number, String | 最大输入长度，设置为 -1 的时候不限制最大长度 | 140 | - |
| min V1.7.0+ | Number, String | 最小值，当number为true、type=number、type=digit 时有效 | - | - |
| max V1.7.0+ | Number, String | 最小值，当number为true、type=number、type=digit 时有效 | - | - |
| cursorSpacing | Number | 指定光标与键盘的距离，单位 px | 0 | App、微信小程序、百度小程序、QQ小程序 |
| confirmType | String | 设置键盘右下角按钮的文字，仅在 type="text" 时生效 | done | 微信小程序、App、H5 |
| confirmHold | Boolean | 点击键盘右下角按钮时是否保持键盘不收起 | false | App、微信小程序、支付宝小程序、百度小程序、QQ小程序 |
| cursor | Number | 指定focus时的光标位置 | -1 | - |
| selectionStart | Number | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | -1 | - |
| selectionEnd | Number | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | -1 | - |
| adjustPosition | Boolean | 键盘弹起时，是否自动上推页面 | true | App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序 |
| holdKeyboard | Boolean | focus时，点击页面的时候不收起键盘 | false | 微信小程序2.8.2 |
| autoBlur | Boolean | 键盘收起时，是否自动失去焦点 | false | App 3.0.0+ |
| alwaysEmbed V1.4.0+ | Boolean | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | false | 微信小程序 2.10.4+ |
| size | Number,String | 输入框字体大小，单位 rpx | 32 | - |
| color | String | 输入框字体颜色 | #333 | - |
| inputBorder | Boolean | 是否显示input边框，为true则属性borderTop，borderBottom失效 | false | - |
| isFillet | Boolean | input是否显示为圆角，设置为true则属性radius失效 | false | - |
| radius | Number,String | 自定义input圆角值，单位rpx | 8 | - |
| borderTop | Boolean | 是否显示上边框 | false | - |
| topLeft | Number, String | 上边框left值，单位rpx | 0 | - |
| topRight | Number, String | 上边框right值，单位rpx | 0 | - |
| borderBottom | Boolean | 是否显示下边框 | true | - |
| bottomLeft | Number, String | 下边框left值，单位rpx | 32 | - |
| bottomRight | Number, String | 下边框right值，单位rpx | 0 | - |
| borderColor | String | 边框颜色 | #EEEEEE | 非Nvue端默认可通过css变量（--fui-color-border）调整颜色 |
| trim | Boolean | 是否自动去除两端的空格 | true | - |
| Boolean | 输入框内容是否右对齐显示 | false | 即将废弃，请使用textAlign属性 | |
| textAlign V2.2.0+ | String | 输入框内容对齐方式，可选值：left、center、right | left | - |
| padding | Array | 输入框padding值：[上,右,下,左] | ['28rpx', '32rpx'] | - |
| backgroundColor | String | 输入框背景颜色 | #FFFFFF | - |
| marginTop | Number,String | 输入框margin-top值,单位rpx | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @input | 当键盘输入时，触发input事件,vue2下可使用v-model指令 | event=value |
| @update:modelValue vue3 | 用于组件的双向绑定,使用v-model指令即可 | event=value |
| @focus | 输入框聚焦时触发（仅微信小程序、App（2.2.3+） 、QQ小程序支持 height） | event.detail = { value, height }，height 为键盘高度 |
| @blur | 输入框失去焦点时触发 | event.detail = {value} |
| @confirm | 点击完成按钮时触发 | event.detail = {value} |
| @click | 点击输入框时触发 | event={name} |
| @keyboardheightchange | 键盘高度发生变化的时候触发此事件（微信小程序基础库2.7.0+、App 3.1.0+） | event={height: height, duration: duration} |
Input 输入框