SingleInput 单输入框

概述

SingleInput 单输入框，每个输入框只允许输入一个字符，主要用于验证码、密码输入框等。

# 支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

# 引入

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

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

import fuiSingleInput from "@/components/firstui/fui-single-input/fui-single-input.vue"
export default {
	components:{
		fuiSingleInput
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

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

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

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

# 代码演示

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

基础使用

通过 type 属性设置输入框类型，同input组件type属性，isFocus 属性设置是否默认获取焦点，@input 为键盘输入时触发事件，@complete 为输入完成时触发事件。

<fui-single-input type="number" isFocus @input="onInput" @complete="onComplete"></fui-single-input>

密码框/设置长度/调整样式

通过 border 属性设置边框类型，borderWidth 属性设置边框宽度，radius 属性设置圆角值，activeColor 属性设置边框高亮颜色，cursorHeight 属性设置光标高度，cursorColor 属性设置光标颜色，length 属性设置输入框/输入内容长度，width 属性设置输入框宽度，height 属性设置输入框高度，size 属性设置输入框字体大小，password 属性设置是否是密码类型。

<fui-single-input border="1" borderWidth="1" radius="16" activeColor="#FFB703" cursorHeight="40" cursorColor="#FFB703" :length="6" width="80" height="80"  size="24" password isFocus  @input="onInput" @complete="onComplete"></fui-single-input>

# Slots

插槽名称	说明
-	-

# Props

属性名	类型	说明	默认值	平台差异说明
padding	Number, String	组件外层左右padding值，单位rpx	88	-
marginTop	Number, String	margin-top值，单位rpx	0	-
marginBottom	Number, String	margin-bottom值，单位rpx	0	-
value	String	native为false时，自定义键盘时输入的值；native为true时初始值。	-	-
type	String	输入框类型，参考官方input (opens new window)组件type属性，native为true时有效	text	H5暂未支持动态切换，请使用 v-if 进行整体切换
password	Boolean	是否是密码类型	false	H5和App写此属性时，type失效；部分平台失焦后再次聚焦输入时会重置之前输入的内容：百度小程序等。
disabled	Boolean	是否禁用输入框	false	-
isFocus	Boolean	获取焦点	false	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。
native	Boolean	是否弹起原生键盘，设为false，则自行结合自定义键盘使用	true	-
cursor	Boolean	是否显示光标	true	-
cursorColor	String	光标颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--fui-color-primary）修改颜色
cursorHeight	Number, String	光标高度，单位rpx	60	-
length	Number	内容长度/输入框个数，一般4~6个字符，请控制在6个或以下	4	-
width	Number, String	输入框宽度，单位rpx	112	-
height	Number, String	输入框高度，单位rpx	112	-
background	String	输入框背景颜色	transparent	-
border	Number, String	边框类型，可选值：1-显示所有边框 2-只显示底部边框，3-无边框	2	-
borderColor	String	边框颜色	#eee	非Nvue端默认值为空，可通过css变量（--fui-color-border）修改颜色
activeColor	String	边框高亮颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--fui-color-primary）修改颜色
borderWidth	Number, String	边框宽度，单位rpx	4	-
radius	Number, String	输入框圆角值，单位rpx	0	-
size	Number, String	输入框字体大小，单位rpx	48	-
color	String	输入框字体颜色	#181818	非Nvue端默认值为空，可通过css变量（--fui-color-titl）修改颜色
fontWeight	Number, String	输入框字重	600	-

# Events

事件名	说明	回调参数
@complete	输入完成时触发	event.detail = {value}
@focus	获取焦点时触发	-
@input	键盘输入时触发，native为true时生效	event.detail = {value}
@blur	失去焦点时触发，native为true时生效	event.detail = {value}
@confirm	点击键盘完成按钮时触发，native为true时生效	event.detail = {value}

# Methods

通过 ref 属性来注册组件引用信息。注册完成后，通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数
clear V1.5.0+	清空输入值，重置输入框	-

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用。

开通会员 (opens new window)

← FilterBar 筛选栏 DigitalRoller 数字滚轮 →