# Input 输入框

概述

Input 输入框，该组件是对原生input组件的增强，内置了常用布局样式，同时包含 input 所有功能。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiInput from "@/components/firstui/fui-input/fui-input.uvue"
export default {
	components:{
		fuiInput
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 borderTop 属性设置是否显示上边框，placeholder 属性设置占位提示内容，maxlength 属性控制输入框内容长度。

<fui-input :borderTop="true" placeholder="请输入用户名"></fui-input>
<fui-input placeholder="请输入手机号码" :maxlength="11"></fui-input>

1
2

带标题

通过 label 属性设置标题。

<fui-input label="标题" :borderTop="true" placeholder="这是一个输入框"></fui-input>
<fui-input label="标题文字" placeholder="请输入文本"></fui-input>

1
2

必填项

通过 required 属性设置是否显示必填图标。

<fui-input :required="true" label="标题" :borderTop="true" placeholder="请输入文本"></fui-input>
<fui-input :required="true" label="标题文字" :bottomLeft="0" placeholder="请输入文本内容"></fui-input>

1
2

使用v-model

双向绑定。

<fui-input label="标题" :borderTop="true" placeholder="请输入文本" :clearable="true" v-model="text"></fui-input>

export default {
	data() {
		return {
			text: ''
		}
	}
}

1
2
3
4
5
6
7

# Slots

插槽名称	说明
default	输入框右侧定义显示内容
left	输入框左侧自定义显示内容

# Props

属性名	类型	说明	默认值	平台差异说明
required	Boolean	是否显示必填图标	false	-
requiredColor	String	必填图标颜色	#FF2B2B	-
label	String	左侧标题	-	-
labelSize	Number	标题字体大小，单位rpx	32	-
labelColor	String	标题字体颜色	#333	-
labelWidth	Number	标题最小宽度，单位rpx	140	-
clearable	Boolean	输入内容后是否显示清除按钮	false	-
clearColor	String	清除按钮颜色	#CCCCCC	-
focus	Boolean	获取焦点	false	-
placeholder	String	输入框为空时占位符	-	-
placeholderStyle	String	指定 placeholder 的样式	-	-
name	String	输入框名称	-	-
value	String	输入框值	-	-
number	Boolean	输入框值做Number转化，vue2兼容写法，vue3可忽略	false	-
type	String	输入框类型，参考官方input (opens new window)组件type属性	text	-
password	Boolean	是否是密码类型	false	-
disabled	Boolean	是否禁用，清除按钮一并失效	false	-
disabledStyle	Boolean	是否启用禁用状态下的样式，与正常输入框样式略有区别，仅disabled为true时有效	false	-
readonly	Boolean	是否只读，保留清除按钮使用，优先级高于disabled	false	-
maxlength	Number	最大输入长度，设置为 -1 的时候不限制最大长度	140	-
min	Number	最小值，当number为true、type=number、type=digit 时有效	-	-
max	Number	最小值，当number为true、type=number、type=digit 时有效	-	-
cursorSpacing	Number	指定光标与键盘的距离，单位 px	0	-
confirmType	String	设置键盘右下角按钮的文字，仅在 type="text" 时生效	done	-
confirmHold	Boolean	点击键盘右下角按钮时是否保持键盘不收起	false	-
cursor	Number	指定focus时的光标位置	-1	-
selectionStart	Number	光标起始位置，自动聚集时有效，需与selection-end搭配使用	-1	-
selectionEnd	Number	光标结束位置，自动聚集时有效，需与selection-start搭配使用	-1	-
adjustPosition	Boolean	键盘弹起时，是否自动上推页面	true	-
size	Number	输入框字体大小，单位 rpx	32	-
color	String	输入框字体颜色	#333	-
inputBorder	Boolean	是否显示input边框，为true则属性borderTop，borderBottom失效	false	-
isFillet	Boolean	input是否显示为圆角，设置为true则属性radius失效	false	-
radius	Number	自定义input圆角值，单位rpx	8	-
borderTop	Boolean	是否显示上边框	false	-
topLeft V1.3.0+	Number	上边框left值，单位rpx	0	-
topRight V1.3.0+	Number	上边框right值，单位rpx	0	-
borderBottom	Boolean	是否显示下边框	true	-
bottomLeft V1.3.0+	Number	下边框left值，单位rpx	32	-
bottomRight V1.3.0+	Number	下边框right值，单位rpx	0	-
borderColor	String	边框颜色	#EEEEEE	-
trim	Boolean	是否自动去除两端的空格	true	-
textAlign	String	输入框内容对齐方式，可选值：left、center、right	left	-
padding	String	输入框padding值	28rpx 32rpx	-
backgroundColor	String	输入框背景颜色	#FFFFFF	-
marginTop	Number	输入框margin-top值,单位rpx	0	-

# Events

事件名	类型	说明	回调参数
@input	(event: string) => void	当键盘输入时，触发input事件	string：输入框值
@update:modelValue	(event: string) => void	用于组件的双向绑定,使用v-model指令即可	string：输入框值
@focus	(event: UniInputFocusEvent) => void	输入框聚焦时触发	UniInputFocusEvent
@blur	(event: UniInputBlurEvent) => void	输入框失去焦点时触发	UniInputBlurEvent
@confirm	(event: UniInputConfirmEvent) => void	点击完成按钮时触发	UniInputConfirmEvent
@onclick	(event: string) => void	点击输入框时触发	string:输入框名称
@keyboardheightchange	(event: UniInputKeyboardHeightChangeEvent) => void	键盘高度发生变化的时候触发此事件	UniInputKeyboardHeightChangeEvent

UniInputFocusEvent：详见 (opens new window)
UniInputBlurEvent：详见 (opens new window)
UniInputConfirmEvent：详见 (opens new window)
UniInputKeyboardHeightChangeEvent：详见 (opens new window)

示例预览

# 示例代码地址

Input 输入框

← Select 选择器 InputNumber 数字输入框 →