企业官网建设流程全解析

北京市住房和城乡建设网站,无极城市在线招聘,网站建设金手指排名霸屏,百度贴吧首页#x1f4c5; 今天很晚才来写#xff0c;我们继续 50 个小项目挑战#xff01;——VerifyAccountUi组件 仓库地址#xff1a;https://gitee.com/hhm-hhm/50days50projects.git ​​​​ 创建一个简洁而优雅的验证码输入界面。通过这个示例#xff0c;你将学会如何构建一… 今天很晚才来写我们继续 50 个小项目挑战——VerifyAccountUi组件仓库地址https://gitee.com/hhm-hhm/50days50projects.git​​​​创建一个简洁而优雅的验证码输入界面。通过这个示例你将学会如何构建一个响应式且用户友好的验证码输入组件并掌握一些实用的 Vue 技巧和 Tailwind CSS 样式技巧。准备好了吗让我们开始吧 组件目标动态生成6个独立的验证码输入框实现自动聚焦与跳转到下一个/上一个输入框的功能添加适当的视觉反馈以提升用户体验采用 Tailwind CSS 快速构建美观的响应式布局 VerifyAccountUi.tsx组件实现import React, { useState, useEffect, useRef } from react const VerifyAccountUi: React.FC () { // 初始化 6 位验证码数组 const [codes, setCodes] useStatestring[](new Array(6).fill()) // 创建 refs 数组用于管理每个 input 元素 const codeInputs useRef(HTMLInputElement | null)[]([]) // 组件挂载后聚焦第一个输入框 useEffect(() { if (codeInputs.current[0]) { codeInputs.current[0].focus() } }, []) // 处理键盘事件 const handleKeyDown (e: React.KeyboardEventHTMLInputElement, index: number) { const key e.key // 只允许数字、Backspace 和 TabTab 用于正常跳转 if (!/^\d$/.test(key) key ! Backspace key ! Tab) { e.preventDefault() return } // 数字输入 if (/^\d$/.test(key)) { const newCodes [...codes] newCodes[index] key setCodes(newCodes) // 自动聚焦下一个输入框 if (index 5 codeInputs.current[index 1]) { setTimeout(() codeInputs.current[index 1]?.focus(), 10) } } // 退格键处理 if (key Backspace) { const newCodes [...codes] newCodes[index] setCodes(newCodes) // 聚焦上一个输入框如果当前为空或刚被清空 if (index 0 codeInputs.current[index - 1]) { setTimeout(() codeInputs.current[index - 1]?.focus(), 10) } e.preventDefault() // 阻止默认删除行为避免重复触发 } } // 同步更新输入框值受控组件 const handleChange (e: React.ChangeEventHTMLInputElement, index: number) { const value e.target.value // 只保留最后一位数字防止粘贴多字符 if (/^\d?$/.test(value)) { const newCodes [...codes] newCodes[index] value.slice(-1) setCodes(newCodes) } } return ( div classNameflex min-h-screen items-center justify-center overflow-hidden bg-gray-900 font-sans div classNamemax-w-2xl rounded-lg border-4 border-black bg-white p-8 text-center h2 classNamemb-2 text-2xl font-boldVerify Your Account/h2 p classNamemb-8 text-gray-600 We emailed you the six digit code to cool_guyemail.com br / Enter the code below to confirm your email address. /p {/* 验证码输入框容器 */} div classNamemb-8 flex flex-wrap items-center justify-center {codes.map((_, index) ( input key{index} ref{(el) { codeInputs.current[index] el }} value{codes[index]} onChange{(e) handleChange(e, index)} onKeyDown{(e) handleKeyDown(e, index)} classNamemx-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 typetext maxLength{1} inputModenumeric pattern[0-9] aria-label{Digit ${index 1}} / ))} /div small classNameinline-block max-w-md rounded-md bg-gray-100 px-4 py-2 text-sm text-gray-600 This is design only. We didnt actually send you an email as we dont have your email, right? /small /div div classNamefixed right-20 bottom-5 z-100 text-2xl text-red-500 CSDNHao_Harrision /div /div ) } export default VerifyAccountUi 关键差异总结功能Vue 3React TS响应式数组ref([, , ...])useStatestring[](...)多元素引用ref([])v-for refuseRef 回调 ref输入绑定v-modelvalue onChange onKeyDown生命周期onMounteduseEffect(..., [])类型安全—string[],HTMLInputElement 转换说明1.状态管理ref([])→useStatestring[]([])VueReactconst codes ref(new Array(6).fill())const [codes, setCodes] useStatestring[](new Array(6).fill())✅ 使用 TypeScript 泛型确保类型安全。2.DOM 引用ref([])→useRef(HTMLInputElement | null)[]Vue 中const codeInputs ref([]) // v-for 中绑定 refcodeInputsReact 中需手动管理 ref 数组const codeInputs useRef(HTMLInputElement | null)[]([]) // 在 render 中 input ref{(el) { codeInputs.current[index] el }} /✅ 这是 React 中批量管理多个 DOM 引用的标准做法。3.生命周期onMounted→useEffect(..., [])useEffect(() { codeInputs.current[0]?.focus(); }, []);✅ 确保只在挂载时聚焦第一个输入框。4.事件处理keydown→onKeyDownonChange为什么需要onChangeVue 的v-model自动处理输入React 是受控组件必须通过value onChange同步状态仅靠onKeyDown无法处理粘贴、拖拽、中文输入法等场景。因此新增handleChangeconst handleChange (e, index) { const value e.target.value; if (/^\d?$/.test(value)) { // 只接受 0 或 1 位数字 setCodes([...codes.slice(0, index), value.slice(-1), ...codes.slice(index 1)]); } };✅ 提升健壮性防止用户粘贴 123 到单个输入框。5.键盘事件逻辑迁移保留数字输入自动跳转保留 Backspace 回退阻止非数字输入如字母、符号使用setTimeout(..., 10)确保 DOM 更新后再聚焦与 Vue 行为一致。6.无障碍与语义化添加aria-label提升可访问性aria-label{Digit ${index 1}}7.样式完全复用所有 Tailwind 类名直接迁移[caret-color:transparent]隐藏光标设计需求inputModenumeric触发移动端数字键盘。✅ 注意事项不要省略onChange否则粘贴内容会失效使用回调 ref避免useRef数组在 re-render 时丢失引用正则校验/^\d$/比e.key 0更可靠避免特殊键干扰防抖聚焦setTimeout确保 React 完成状态更新后再操作 DOM。 可选优化将完整验证码拼接为字符串const fullCode codes.join()添加“重新发送”按钮支持鼠标点击聚焦任意输入框。 TailwindCSS 样式重点讲解 TailwindCSS 样式说明类名作用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添加黑色边框边框宽度为 4pxbg-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应用所有属性的变化过渡效果持续时间为 300msfocus:border-blue-500 focus:shadow-lg focus:shadow-blue-200/50当输入框获得焦点时改变边框颜色、添加阴影以增强视觉反馈focus:outline-none移除默认的聚焦轮廓线避免干扰设计的一致性 路由组件 常量定义router/index.tsx中children数组中添加子路由{ path: /, element: App /, children: [ ... { path: /VerifyAccountUi, lazy: () import(/projects/VerifyAccountUi).then((mod) ({ Component: mod.default, })), }, ], },constants/index.tsx 添加组件预览常量import demo41Img from /assets/pic-demo/demo-41.png 省略部分.... export const projectList: ProjectItem[] [ 省略部分.... { id: 41, title: Verify Account Ui, image: demo41Img, link: VerifyAccountUi, }, ] 小结通过这篇文章我们使用 React19 和 TailwindCSS 创建一个直观且易于使用的验证码输入界面。通过合理利用 react的useState和 Tailwind CSS 的强大样式能力我们可以轻松地构建出既美观又功能强大的前端组件。想要让你的验证码输入界面更加完善考虑以下扩展功能✅ 表单提交验证增加对用户输入验证码的验证逻辑。✅ 错误提示当验证码无效时显示相应的错误消息。✅ 倒计时重发机制模拟验证码过期后重新发送验证码的功能。 明日预告 我们将完成RangeSlider组件一个可以自定义进度的范围滑块组件。感谢阅读欢迎点赞、收藏和分享 原文链接https://blog.csdn.net/qq_44808710/article/details/149778543https://blog.csdn.net/qq_44808710/article/details/149779252https://blog.csdn.net/qq_44808710/article/details/149778543每天造一个轮子码力暴涨不是梦