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>
<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"><inputv-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><smallclass="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 youremail, right?</small></div></div>
</template>
模板部分主要包括一个标题、说明文字以及六个独立的验证码输入框。每个输入框都设置了样式以提供良好的用户体验，例如自动聚焦、数字输入限制等。
💻 脚本逻辑 <script setup>
<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 添加组件预览常量：
{id: 42,title: 'LiveUserFilter',image: 'https://50projects50days.com/img/projects-img/42-live-user-filter.png',link: 'LiveUserFilter',},
router/index.js 中添加路由选项：
{path: '/LiveUserFilter',name: 'LiveUserFilter',component: () => import('@/projects/LiveUserFilter.vue'),},
🏁 总结
使用 Vue 3 和 Tailwind CSS 创建一个直观且易于使用的验证码输入界面。通过合理利用 Vue 的响应式特性和 Tailwind CSS 的强大样式能力，我们可以轻松地构建出既美观又功能强大的前端组件。
想要让你的验证码输入界面更加完善？考虑以下扩展功能：
- ✅ 表单提交验证：增加对用户输入验证码的验证逻辑。
- ✅ 错误提示：当验证码无效时显示相应的错误消息。
- ✅ 倒计时重发机制：模拟验证码过期后重新发送验证码的功能。
👉 下一篇，我们将完成RangeSlider组件，一个可以自定义进度的范围滑块组件。。🚀
感谢阅读，欢迎点赞、收藏和分享 😊