短信验证码输入框

因为需求需要有6个连续输入的短信验证码框，花了点时间。把它封装了下。
我用的是uniapp，但是道理是一样的。不理解的，你把view换成div。
这个组件是通用的

先上效果图

1、用法（引入）

<template>
	<xskCodeInput 
	 	:value.sync="password" 
	    :width="100"
	    :height="144"
	    backgroundColor="#FAFAFA"
	    bold
	    showVal
	    :length="6"
	    @confirm="inputConfirm">
	</xskCodeInput>
</xskCodeInput>

</template>

<script>
import xskCodeInput from '@/components/xsk-code-input/xsk-code-input';

export default {
	components: {
		xskCodeInput
	},
	data() {
		return {
			password: '',
		};
	},
	onLoad() {},
	methods: {
	   //输入内容达到最大长度时触发此事件
		inputConfirm() {
			console.log(this.password)
		},
	}
};

</script>

2、属性说明：

3、封装的组件

如果要改样式，改class="box"盒子就行了。

<template>
	<view>
		<view class="xskcodeinput">
			<view class="box" :style="{'width':width+'rpx','height':height+'rpx',backgroundColor:backgroundColor}" @click="focus=true" v-for="(item,index) in length" :key="index">
				<view v-if="password.length>index" :style="{'bold':bold?'bold':'normal'}">{{showVal?password[index]:'*'}}</view>
				<view class="line" v-if="password.length==index" style="font-weight: normal;font-size:30px;height:144rpx;line-height: 144rpx;">|</view>
			</view>
			
			<input class="input" type="number" :focus="focus" v-model="password" maxlength="6" @focus="focus=true" @blur="focus=false" @input="userinput"/>
		</view>
	</view>
</template>

<script>
	export default {
		name:"xskCodeInput",
		data() {
			return {
				focus:false,
				password:''
			};
		},
		props:{
			width:{
				type:[Number, String],
				default:84,
			},
			height:{
				type:[Number, String],
				default:84,
			},
			backgroundColor: {
				type: String,
				default: "#EDEDED"
			},
			bold:{
				type:Boolean,
				default:true
			},
			showVal:{
				type:Boolean,
				default:false
			},
			length:{
				type:Number,
				default:6
			},
		},
		methods: {
			userinput(e){
				this.$emit('update:value',this.password);
				if(e.detail.value.length==this.length){
					this.focus = false
					this.$emit('confirm')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.xskcodeinput{
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		.box{
			margin-right: 12rpx;
			text-align: center;
			font-size: 38rpx;
			line-height: 144upx;
			border: 1px solid #263A97;
			color: #3A3A3C;
			font-size: 48px;
			font-weight: 700;
			border-radius: 16rpx;
			&:last-child{
				margin-right: 0;
			}
			.line{
				opacity: 0;
				animation-name: donghua;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				animation-duration: .5s;
				animation-direction: alternate;
			}
			@keyframes donghua{
				0%{
					opacity: 1;
				}
				100%{
					opacity: 0;
				}
			}
		}
		
		.input{
			position: absolute;
			top: 0;
			left: -100%;
			width: 200%;
			height: 100%;
			opacity: 0;
		}
	}
</style>

如果对你有帮助，点个赞呗。 ヾ(@^▽@)ノ