50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | VerifyAccountUi（验证码组件）

📅 我们继续 50 个小项目挑战！------ VerifyAccountUi组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

使用 Vue 3 的 <script setup> 语法结合 Tailwind CSS 来创建一个简洁而优雅的验证码输入界面。通过这个示例，你将学会如何构建一个响应式且用户友好的验证码输入组件，并掌握一些实用的 Vue 技巧和 Tailwind CSS 样式技巧。

准备好了吗？让我们开始吧！🚀

📝 应用目标

使用 Vue 3 Composition API 管理状态与事件处理
动态生成6个独立的验证码输入框
实现自动聚焦与跳转到下一个/上一个输入框的功能
利用 Tailwind CSS 快速搭建美观且响应式的布局
添加适当的视觉反馈以提升用户体验

🔧 技术实现点

技术点	描述
Vue 3 `<script setup>`	使用 `ref` 和 `onMounted` 定义响应式数据及生命周期钩子
响应式数组 `codes`	存储每个验证码输入框的内容
`v-for` 循环生成	创建6个独立的输入框
`@keydown` 事件监听	处理键盘输入并控制焦点移动
Tailwind 过渡动画	提供平滑的交互体验

🖌️ 组件实现

🎨 模板结构 `<template>`

html 复制代码

<template>
    <div class="flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 font-sans">
        <div class="max-w-2xl rounded-lg border-4 border-black bg-white p-8 text-center">
            <h2 class="mb-2 text-2xl font-bold">Verify Your Account</h2>
            <p class="mb-8 text-gray-600">
                We emailed you the six digit code to cool_guy@email.com
                <br />
                Enter the code below to confirm your email address.
            </p>

            <!-- 验证码输入框容器 -->
            <div class="mb-8 flex flex-wrap items-center justify-center">
                <input
                    v-for="(code, index) in codes"
                    :key="index"
                    v-model="codes[index]"
                    ref="codeInputs"
                    @keydown="handleKeyDown($event, index)"
                    class="mx-1 my-2 h-20 w-20 rounded-md border border-gray-200 text-center text-5xl font-light [caret-color:transparent] transition-all duration-300 focus:border-blue-500 focus:shadow-lg focus:shadow-blue-200/50 focus:outline-none"
                    type="text"
                    maxlength="1"
                    inputmode="numeric"
                    pattern="[0-9]" />
            </div>

            <small
                class="inline-block max-w-md rounded-md bg-gray-100 px-4 py-2 text-sm text-gray-600">
                This is design only. We didn't actually send you an email as we don't have your
                email, right?
            </small>
        </div>
    </div>
</template>

模板部分主要包括一个标题、说明文字以及六个独立的验证码输入框。每个输入框都设置了样式以提供良好的用户体验，例如自动聚焦、数字输入限制等。

💻 脚本逻辑 `<script setup>`

js 复制代码

<script setup>
    import { ref, onMounted } from 'vue'

    // 验证码输入框响应式数据
    const codes = ref(new Array(6).fill(''))
    const codeInputs = ref([])

    // 组件挂载后聚焦第一个输入框
    onMounted(() => {
        codeInputs.value[0].focus()
    })

    // 处理键盘输入事件
    const handleKeyDown = (e, index) => {
        // 只允许数字输入
        if (!/\d/.test(e.key) && e.key !== 'Backspace' && e.key !== 'Tab') {
            e.preventDefault()
            return
        }

        // 数字输入处理
        if (e.key >= 0 && e.key <= 9) {
            codes.value[index] = e.key
            // 自动聚焦到下一个输入框
            if (index < 5) {
                setTimeout(() => codeInputs.value[index + 1].focus(), 10)
            }
        }

        // 退格键处理
        if (e.key === 'Backspace') {
            // 清空当前输入框
            codes.value[index] = ''
            // 聚焦到上一个输入框
            if (index > 0) {
                setTimeout(() => codeInputs.value[index - 1].focus(), 10)
            }
            e.preventDefault()
        }
    }
</script>

脚本部分主要实现了以下功能：

初始化一个包含6个空字符串的数组 codes，用于存储每个验证码输入框的内容。
在组件挂载时自动聚焦到第一个输入框。
监听键盘事件 handleKeyDown，根据用户的输入行为调整焦点位置或更新验证码内容。

🎨 Tailwind CSS 样式重点

类名	作用
`min-h-screen`	设置最小高度为视口高度，确保页面至少占满整个屏幕的高度
`items-center` / `justify-center`	分别在交叉轴（垂直）和主轴（水平）上居中对齐子元素
`overflow-hidden`	隐藏超出容器的内容，防止溢出导致滚动条出现
`bg-gray-50`	设置背景颜色为浅灰色，作为整体页面背景色
`font-sans`	使用无衬线字体系列
`max-w-2xl`	设置最大宽度为 2xl (72rem)，限制主要内容区域的最大宽度
`rounded-lg`	给元素添加较大的圆角半径
`border-4 border-black`	添加黑色边框，边框宽度为 4px
`bg-white`	设置背景颜色为白色，用于主要内容区域的背景色
`p-8`	设置内边距为 8 个单位，提供足够的空间来分隔内容与边界
`text-center`	文本居中对齐
`mb-2` / `mb-8`	设置下外边距分别为 2 和 8 个单位，用于控制元素间的间距
`text-2xl` / `text-sm`	设置文本大小为 2xl (1.5rem) 和 sm (0.875rem)
`font-bold`	设置字体加粗
`text-gray-600`	设置文本颜色为灰色，提供对比度但不过于强烈
`flex-wrap`	允许子元素换行排列，适应不同屏幕尺寸
`mx-1 my-2`	分别设置左右外边距为 1 单位和上下外边距为 2 单位，用于输入框之间的间距
`h-20 w-20`	设置固定的高度和宽度为 20 个单位，定义输入框的大小
`rounded-md`	给元素添加中等大小的圆角半径
`border border-gray-200`	添加浅灰色边框，增加视觉层次感
`text-center`	文本居中对齐，适用于单字符输入框的设计
`text-5xl font-light`	设置大号轻量级字体，使验证码数字更加突出
`[caret-color:transparent]`	将光标颜色设置为透明，隐藏默认的闪烁光标
`transition-all duration-300`	应用所有属性的变化过渡效果，持续时间为 300ms
`focus:border-blue-500 focus:shadow-lg focus:shadow-blue-200/50`	当输入框获得焦点时，改变边框颜色、添加阴影以增强视觉反馈
`focus:outline-none`	移除默认的聚焦轮廓线，避免干扰设计的一致性

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

js 复制代码

{
        id: 42,
        title: 'LiveUserFilter',
        image: 'https://50projects50days.com/img/projects-img/42-live-user-filter.png',
        link: 'LiveUserFilter',
    },

router/index.js 中添加路由选项：

js 复制代码

{
        path: '/LiveUserFilter',
        name: 'LiveUserFilter',
        component: () => import('@/projects/LiveUserFilter.vue'),
    },

🏁 总结

使用 Vue 3 和 Tailwind CSS 创建一个直观且易于使用的验证码输入界面。通过合理利用 Vue 的响应式特性和 Tailwind CSS 的强大样式能力，我们可以轻松地构建出既美观又功能强大的前端组件。

想要让你的验证码输入界面更加完善？考虑以下扩展功能：

✅ 表单提交验证：增加对用户输入验证码的验证逻辑。
✅ 错误提示：当验证码无效时显示相应的错误消息。
✅ 倒计时重发机制：模拟验证码过期后重新发送验证码的功能。

👉 下一篇，我们将完成RangeSlider组件，一个可以自定义进度的范围滑块组件。。🚀

感谢阅读，欢迎点赞、收藏和分享 😊

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | VerifyAccountUi（验证码组件）

📝 应用目标

🔧 技术实现点

🖌️ 组件实现

🎨 模板结构 <template>

💻 脚本逻辑 <script setup>

🎨 Tailwind CSS 样式重点

📁 常量定义 + 组件路由

🏁 总结

🎨 模板结构 `<template>`

💻 脚本逻辑 `<script setup>`