vue+Element ui渲染电话号码输入框，输完一个自动聚焦下一个输入框，可连续删除

最近做了一个需求，是要渲染出11个电话号码输入框，每个输入框只能输入一个数字，并且当前输入框输入后自动聚焦到下一个输入框，连续删除时，自动聚焦到上一个输入框。

先展示一下效果

自动聚焦下一个输入框，删除时聚焦当前输入框，并且连续删除时自动聚焦上一个输入框

实现

1、先在data中定义一个数组用于循环渲染输入框

//声明了一个长度为13的数组，包括了中间的‘—’
//由于电话号码第一位默认为1，所以数组第0个，默认赋值为1
searchList: [
{ value: 1 }, 
{ value: '' }, 
{ value: '' }, 
{ value: '—' }, 
{ value: '' }, 
{ value: '' }, 
{ value: '' }, 
{ value: '' }, 
{ value: '—' }, 
{ value: '' }, 
{ value: '' }, 
{ value: '' }, 
{ value: '' }
],

2、通过vue的v-for指令进行循环渲染 输入框

<div v-for="(item, index) in searchList" :key="index">
//循环渲染输入框 当index为0、3、8时，渲染div标签，展示默认的value值
//其他情况则渲染输入框，并且给元素动态绑定ref值 用于获取元素
 <div :ref="'inputRef' + index" v-if="index == 0 || index == 3 || index == 8" style="margin-right: 12px;">{{ item.value }}</div>
 //给元素添加事件 监听input输入事件 监听键盘按下BACKSPACE按键时的键盘事件
 <el-input :ref="'inputRef' + index" v-else maxlength="1" type="text" v-model="item.value"  @input="onInput($event,index)" @keydown.8.native="onKeydownBackSpace($event,index)" />
 </div>

3、在methods中写方法

// 监听input的输入事件
onInput(e, index) {
       let inputRef='inputRef'+index;
       let nextInputRef='inputRef'+(index+1);
       let theNextInputRef='inputRef'+(index+1+1);
       let currentInput=this.$refs[inputRef]; //当前输入框
       let nextInput=this.$refs[nextInputRef]; //下一个输入框
       let theNextInput=this.$refs[theNextInputRef]; //下一个的下一个输入框
       if (!isNaN(e)) {
           // 如果是数字 并且有值 并且有下一个输入框元素
           if (e && nextInput) {
               nextInput[0].focus();
           }
           if (nextInput?.[0]?.nodeName?.toLowerCase() == 'div') {
               // 如果下一个元素是div
               // 获取下一个元素的再下一个元素 聚焦
               if (theNextInput) {
                   theNextInput[0].focus();
               }
           }
       }
       else {
           // 如果输入的非数字
           currentInput[0].clear();
           currentInput[0].focus();
       }

       if(!e){
           // 如果是清空了 当前输入框元素继续获取焦点
           currentInput[0].focus();
       }
     },
  // 监听键盘 backspace事件
	onKeydownBackSpace(e,index){
	     let inputRef='inputRef' + index ; 
	     let prevInputRef='inputRef'+(index-1); 
	     let thePrevInputRef='inputRef'+(index-1-1); 
	     let currentInput=this.$refs[inputRef]; //当前的输入框
	     let prevInput=this.$refs[prevInputRef]; //上一个输入框
	     let thePrevInput=this.$refs[thePrevInputRef]; //上一个的上一个输入框
	     if(!currentInput[0].value&&prevInput){
	         prevInput[0].focus();
	     }
	     if(!currentInput[0].value&&prevInput?.[0]?.nodeName?.toLowerCase()=='div'){
	         // 如果删除当前元素了 并且有前一个元素 并且前一个元素为 div
	         // 获取前一个元素的 再前一个元素 聚焦
	         if(thePrevInput){
	             thePrevInput[0].focus();
	         }
	     }
	 },

以上就是实现的全部过程，需要注意设置input输入框的maxlength为1，且type为text，监听当输入的为非数字时，调用组件的clear方法清除，并自动聚焦。