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>
    </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>
相关推荐
借月3 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang4 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
DoraBigHead18 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00121 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州33 分钟前
希尔排序
前端·javascript
爱学习的茄子34 分钟前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427111 小时前
Canvas之绘制图形
前端·javascript·canvas
gnip1 小时前
99%前端不知道的API WebTransport
前端·javascript
小杜不是小杜1 小时前
qiankun:vue3+webpack 微前端搭建
前端·vue.js
Lazy_zheng1 小时前
React 核心 API 全景实战:从状态管理到性能优化,一网打尽
前端·javascript·react.js