vue3制作类微信的六位的密码输入框

这是一个 Vue 3 组件，用于创建一个自定义的密码输入框。这个输入框由6个小输入框组成，每个小输入框只能输入一个字符。当用户在一个小输入框中输入字符后，焦点会自动跳到下一个输入框，直到所有6个输入框都填满为止。当6个字符都输入完成后，会触发一个名为 'input-complete' 的自定义事件，并将输入的密码作为参数传递出去。

下面是代码的详细解释：

模板部分 (<template>)

• <div class="password-input">: 包裹所有输入框的容器。

• <input v-for="(item, index) in Array.from({ length: 6 })" :key="index" ref="inputs" v-model="passwords[index]" @input="onInput(index, $event)" maxlength="1" type="password" />: 使用 v-for 指令创建6个输入框。每个输入框绑定到 passwords 数组的一个元素上，并通过 @input 监听输入事件。

  • v-for="(item, index) in Array.from({ length: 6 })": 循环6次以创建6个输入框。
  • :key="index": 为每个输入框设置一个唯一的 key。
  • ref="inputs": 为所有输入框设置一个引用。
  • v-model="passwords[index]": 双向绑定到 passwords 数组的一个元素上。
  • @input="onInput(index, $event)": 当输入框的值改变时，调用 onInput 函数。
  • maxlength="1": 限制每个输入框只能输入一个字符。
  • type="password": 设置输入框类型为密码，这样输入的字符会被遮挡。

脚本部分 (<script setup>)

• import { ref, onMounted, watch } from 'vue';: 从 Vue 3 中导入所需的函数和API。
• const passwords = ref(Array(6).fill(''));: 创建一个响应式引用 passwords，初始化为一个包含6个空字符串的数组。
• function onInput(index, event) {...}: 定义一个函数，当输入框的值改变时被调用。如果当前输入框不是最后一个（索引小于5），则使当前输入框失去焦点，并在下一个可用的输入框上设置焦点。
• onMounted(() => {...}): 在组件挂载完成后执行一些操作。这里使用 watch 函数来监听 passwords 引用的变化。当 passwords 的值改变时，检查密码的长度是否达到6个字符，如果是，则触发 'input-complete' 事件。

样式部分 (<style scoped>)

• .password-input input: 为 .password-input 类下的所有 input 元素设置样式。这里设置了宽度、高度、文本对齐方式和外边距。
• scoped: 这个属性意味着这些样式只适用于当前组件，不会影响其他组件或全局样式

<template>
  <div class="password-input">
    <input v-for="(item, index) in Array.from({ length: 6 })" :key="index"
      ref="inputs" v-model="passwords[index]" @input="onInput(index, $event)" 
      maxlength="1" type="password" />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const passwords = ref(Array(6).fill(''));

function onInput(index, event) {
  const input = event.target;
  if (!input.value) return;
  if (index < 5) {
    input.blur();
    setTimeout(() => {
      const nextIndex = index + 1;
      const nextInput = input.nextElementSibling;
      if (nextInput) nextInput.focus();
    }, 0);
  }
}

onMounted(() => {
  watch(passwords, (newVal) => {
    const password = newVal.join('');
    if (password.length === 6) {
      // 触发密码输入完成事件，传递密码值
      emit('input-complete', password);
    }
  });
});
</script>

<style scoped>
.password-input input {
  width: 40px;
  height: 40px;
  text-align: center;
  margin: 0 5px;
}
</style>