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>
相关推荐
coderlin_27 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说42 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖2 小时前
React Native 组件间通信方式详解
javascript·react native·react.js