本文主要是介绍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>这篇关于vue3制作类微信的六位的密码输入框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
