vue中实现验证码输入

vue验证码input输入解决焦点切换

有点晚了就不吐槽了，咱还是把代码上了，赶紧洗澡，养好精神明天努力上班！！！
想学node,想学react,想精进webpack,想vue学的更好一点，了解底层代码，学算法，学计算机原理，想写自己的博客网站…
这是一条学无止境的路，没办法要恰饭

效果

html部分

<div class="verifyCode">
	<input 
		type="text"
		v-for="p in inputNums" 
		:key="p"
		@input="inputFun($event,p)"
		:value="code[p-1]"
		:class="{success: code[p-1]}"
	>
</div>

js部分

export default{
	props: {
		inputNums: {
			type: Number,
			default: 6
		},
		value: {
			type: String,
			default: ''
		}
	},
	data(){
		return {
			code: this.value.split('')
		}
	},
	watch: {
		value(newVal){
			this.code = newVal.split('');
		},
		code(newVal){
			this.$emit('input',newVal.join(''));
		}
	},
	methods: {
		//1.监听用的键入，每次键入都替换掉焦点输入框的值
		//2.输入框的值只能有一位
		inputFun(e,p){
			let ele = e.target;
			let siblingsNode = ele.parentNode.children;
			if(!e.data){//删除
				this.$delete(this.code,p-1);
				if(p <= 2){//边界值
					p = 2;
				}
				siblingsNode[p-2].focus();
				return false;
			}
			let value = e.target.value.replace(/\W/g,'').slice(-1);
			ele.value = value;
			this.$set(this.code,p-1,value)
			if(p >= siblingsNode.length-1){//边界值
				p = siblingsNode.length-1;
			}
			if(value){//上一个元素获得焦点
				siblingsNode[p].focus();
			}
		}
	}
}

<style scoped lang="scss">
	@mixin border(){
		border: 1px solid #eee;
	}
	.verifyCode{
		input{
			@include border();
			font-size: 14px;
			margin-left: 2px;
			width: 60px;
			height: 60px;
			border-radius: 5px;
			text-align: center;
			&:first{
				margin-left: 0;
			}
			&:focus{
				outline-color: #F56C6C;
			}
			&.success{
				border-color: #67C23A;
				border-width: 1px;
				transition: border-color .5s;
				outline: none;
			}
		}
	}
</style>

调用方法定义一个值，然后用v-model绑定就可以了

<verifyCode v-model="code"></verifyCode>

有用就点个赞哦