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>
相关推荐
白水清风4 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780016 分钟前
new、原型和原型链浅析
前端·javascript
阿星做前端16 分钟前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧16 分钟前
Promise 的使用
前端·javascript
用户51681661458411 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 小时前
JavaScript 作用域
前端·javascript
前端缘梦1 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖2 小时前
JS核心知识-事件循环
前端·javascript
Simon_He2 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
eason_fan2 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript