# 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
第二种: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
带标题

通过 label 属性设置标题。

<fui-input label="标题" borderTop placeholder="这是一个输入框"></fui-input>
<fui-input label="标题文字" :bottomLeft="0" placeholder="请输入文本"></fui-input>
1
2
必填项

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

<fui-input required label="标题" borderTop placeholder="请输入文本"></fui-input>
<fui-input required label="标题文字" :bottomLeft="0" placeholder="请输入文本内容"></fui-input>
1
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 -
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是否显示为圆角 false -
radius Number,String 自定义input圆角值,无边框时生效,单位rpx -1 -
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 边框颜色,inputBorder为true时,非nvue端不生效 #EEEEEE inputBorder为true时,仅nvue端支持,非nvue端边框颜色通过css变量(--fui-color-border)修改
trim Boolean 是否自动去除两端的空格 true -
textRight Boolean 输入框内容是否右对齐显示 false -
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}

示例预览

# 示例代码地址

FirstUIInput 输入框
Last Updated: 9/29/2022, 1:07:59 AM