card-wx-user/components/thorui/tui-keyboard-input/tui-keyboard-input.vue

<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>

<style scoped>
	.tui-pwd-box {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		vertical-align: top;
	}

	.tui-inner-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-input {
		height: 80rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		border-bottom: 2px solid #666;
	}

	.tui-margin-right {
		margin-right: 30rpx;
	}

	.tui-input:last-child {
		margin-right: 0 !important;
	}
</style>