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>
相关推荐
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安10 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202010 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子10 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js
_pengliang10 小时前
小程序按住说话
开发语言·javascript·小程序