📅 我們繼續 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組件，一個可以自定義進度的范圍滑塊組件。。🚀
感謝閱讀，歡迎點贊、收藏和分享 😊
