支付密码方框样式 vue3语法（开箱即用）

直接上代码

  <div class="verification-container">
         <input v-for="(code, index) in verificationCodes" :key="index"
          class="verification-input"
          type="password"
          v-model="verificationCodes[index]"
          @input="handleInput(index, $event)"
          @keydown="handleKeyDown(index, $event)" 
          maxlength="1" />
  </div>
<script>
let verificationCodes=ref(['', '', '', '', '', '']);  //输入的密码
// 输入框失去焦点时触发
const handleInput = (index, event) => {
  let zc = /^\d+$/  // 来个正则效验一波
  const value = event.target.value;  // 每次输入的值
  //数字类型效验
  if (!zc.test(value)) {
    return verificationCodes.value[index] = ''
  }
  //效验成功后 把值放入到 数组里对应的下标内
  verificationCodes.value[index] = value;  
  // 自动跳到下一个输入框
  if (value && index < verificationCodes.value.length - 1) {
     // 使用nextElementSibling跳转到下一个InPut框（相当于tab键进入下一个输入框）
    const nextInput = event.target.nextElementSibling;
    if (nextInput) {
      nextTick(() => {
        nextInput.focus();
      });
    }
  }
};
// 处理删除
const handleKeyDown = (index, event) => {
    //   event.key === 'Backspace' 相当于退格键        
  if (event.key === 'Backspace' && !event.target.value && index > 0) {
    const prevInput = event.target.previousElementSibling;
    if (prevInput) {
      nextTick(() => {
        prevInput.focus();
      });
    }
  }
};
// 确定密码
const changqd = async () => {
    let paymentParams = verificationCodes.value.join('')
    if (paymentParams.length < 6) {
        return message.error(`请输入完整密码`);
    }
    console.log(paymentParams,'这个就是拿到的密码值了 列如：123456 这种 ')
    //下面就是调用自己的接口了
    
}
<script>
.verification-container {
    display: flex;
}
.verification-input {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.verification-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px #007bff;
}

感觉好用小伙伴可以 点赞 收藏 加关注 会持续添加更多实用开箱即用功能