vue input 拆分式验证码

完成的样式 功能有 添加删除自动获取前后input焦点 中间删除留空

<input 
v-for='(item,index) in 6' 
v-model.number="code[index]" 
onkeyup="value=value.replace(/[^\d]/g,'')" 
type="text" 
maxlength="1" 
@input="inputFun($event,index)"
:key="index"
>

<script>
export default {
    props: {
		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){
            console.log(e,p)
			let ele = e.target;
            let siblingsNode = ele.parentNode.children;
			if(!e.data){//删除
                // this.$delete(this.code,p);
                this.code[p]=''
				if(p <= 0){//边界值
					p = 0;
                }
                
				if(p==5||this.code[p+1]==''){
                    siblingsNode[p-1].focus();
                }else{
                    siblingsNode[p].focus(); 
                    
                }
				return false;
			}
			let value = e.target.value.replace(/\W/g,'').slice(-1);
			ele.value = value;
			this.$set(this.code,p,value)
			if(p >= siblingsNode.length-1){//边界值
				p = siblingsNode.length-1;
			}
			if(value){//上一个元素获得焦点
				siblingsNode[p+1].focus();
            }
		}
	}
}
</script>

input:focus{
    outline: none;
    border-bottom: 2px solid #325CC7;
}
input{
    width: 45px;
    margin-right: 16px;
    height: 60px;
    border: none;
    border-bottom: 2px solid rgba(211,213,216,1);
    text-align: center;
}