这是一个 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元素设置样式。这里设置了宽度、高度、文本对齐方式和外边距。 -
<template>scoped: 这个属性意味着这些样式只适用于当前组件，不会影响其他组件或全局样式</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(() => {
<style scoped> .password-input input { width: 40px; height: 40px; text-align: center; margin: 0 5px; } </style>
watch(passwords, (newVal) => {
const password = newVal.join('');
if (password.length === 6) {
// 触发密码输入完成事件，传递密码值
emit('input-complete', password);
}
});
});
</script>