【IP地址】输入小数点，自动移到下一输入框

1. 实现效果

输入框最多只能输入三位数字（0-255），按下. 光标会自动跳转到下一个输入框。

2. 实现过程

• 给输入框的值绑定一个数组（有4个元素）， v-for 遍历生成输入框。
• 通过动态ref绑定每一个输入框ref
• 监听输入框是否有输入. ，有就让下一个输入框dom元素获得焦点

<template>
   输入IP
        <el-input
          v-for="(item, i) in convertState.ip"
          :key="i"
          :ref="(e: any) => (numInputRefs[i] = e)"
          v-model="convertState.ip[i]"
          :controls="false"
          class="w-55"
          @input="handleInput(i)" />
</template>

<script setup lang="ts">
import { InputInstance } from 'element-plus';
// numInputRefs 是一个对象，存储多个ref，键名是索引，值是input实例
const numInputRefs = reactive<Record<number, InputInstance>>({});

// 输入框绑定的值
const convertState = reactive({
  ip: ['', '', '', ''],
});

// 输入时触发
const handleInput = (i) => {
  const val = convertState.ip[i];
  // 只允许数字和 .
  if (!val.match(/[0-9.]/)) {
    convertState.ip[i] = val.replace(/[^0-9.]/g, '');
  }
  if (Number(val) < 0) return (convertState.ip[i] = '0');
  if (Number(val) > 255) return (convertState.ip[i] = '255');

  if (val.includes('.')) {
    if (i < convertState.ip.length - 1) {
      // 前三个.跳转
      convertState.ip[i] = val.slice(0, -1);// 输入框移除.
      _.get(numInputRefs, i + 1).focus();// 下一个输入框获得焦点
    } else {
      convertState.ip[i] = val.slice(0, -1);
    }
  }
};
</script>

这里的完整需求是通过输入ip地址和子网掩码计算ip起始和结束地址，这个实现过程后面再放一篇~