keyboard-input

keyboard-input 数字键盘输入框,结合keyboard使用

组件结构

<template>
	<view class="tui-keyboard-input tui-pwd-box" :style="{backgroundColor:backgroundColor}">
		<view class="tui-inner-box">
			<view class="tui-input" :class="[inputvalue.length===4?'tui-margin-right':'']" :style="{fontSize:size+'rpx',color:color,width:(inputvalue.length===4?90:70)+'rpx' }"
			 v-for="(item,index) in inputvalue" :key="index">{{item}}</view>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiKeyboardInput",
		props: {
			//背景颜色
			backgroundColor: {
				type: String,
				default: "#fff"
			},
			size: {
				type: Number,
				default: 32
			},
			color: {
				type: String,
				default: "#333"
			},
			//输入框的值:数组格式,长度即为输入框个数
			inputvalue: {
				type: Array,
				default: ["", "", "", "", "", ""] //密码圆点 ●
			}
		},
		data() {
			return {
	
			};
		}
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
backgroundColor String 输入框外层背景颜色 #fff
size Number 输入框文字大小 32
color String 输入框文字颜色 #333
inputvalue Array 输入框的值:数组格式,长度即为输入框个数 ["", "", "", "", "", ""]

methods

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/keyboard/keyboard

H5二维码

小程序二维码