南通网站制作外包,360广告投放平台,网络技术就业方向,公司做网站需要注意什么事情可能你疑惑为啥名字和功能不一样#xff0c;哈哈哈#xff0c;不要怀疑#xff0c;这只是我打错名字懒得改了。。。 #x1f4c5; 我们继续 50 个小项目挑战#xff01;—— RandomChoicePicker组件
仓库地址#xff1a;https://github.com/SunACong/50-vue-projects
项… 可能你疑惑为啥名字和功能不一样哈哈哈不要怀疑这只是我打错名字懒得改了。。。 我们继续 50 个小项目挑战—— RandomChoicePicker组件
仓库地址https://github.com/SunACong/50-vue-projects
项目预览地址https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API 和 script setup 语法结合 TailwindCSS 构建一个简单的标签输入组件。用户可以在文本框中输入多个选项并通过逗号分隔组件会自动将其拆分成可视化的“标签”展示出来。 组件目标
接收用户输入的一段文本。使用逗号 , 分割输入内容。动态渲染为一组“标签”Tag。使用 TailwindCSS 快速构建美观现代的 UI 界面。提供清晰的交互反馈。
⚙️ 技术实现点
技术点描述Vue 3 Composition API (script setup)使用响应式变量管理组件状态v-model 双向绑定绑定 textarea 输入值watchEffect 副作用监听自动拆分并更新 tagListv-for 渲染列表动态生成多个 Tag 元素TailwindCSS 样式类快速构建现代 UI 组件实现
模板结构 template
templatediv classflex h-screen items-center justify-centerdiv classrounded-2xl bg-gray-400 p-8h3 classfont-mono text-2xlEnter all of the choices divided by a comma (,).br /Press enter when youre done/h3textareaclassmy-4 h-36 w-full bg-gray-200 p-4placeholderEnter choices here...v-modeltextareaText/textareadiv classflex gap-2 v-iftagList[0] ! div classh-8 rounded-2xl bg-amber-200 p-1 v-foritem in tagList :keyitem{{ item }}/div/div/div/div
/template脚本逻辑 script setup
script setup
import { ref, watchEffect } from vueconst textareaText ref()const tagList ref([])const splitTag () {tagList.value []const tagItems textareaText.value.split(,)tagItems.forEach((item) {tagList.value.push(item.trim()) // 去除前后空格})
}watchEffect(() {splitTag()
})
/script重点效果实现
✅ 实时拆分与渲染
我们使用 v-model 将 textarea 的值与 textareaText 进行双向绑定
textarea v-modeltextareaText/textarea并通过 watchEffect() 监听其变化一旦发生变化就执行 splitTag() 方法将输入内容以逗号分割为数组并去除空格后推入 tagList。
watchEffect(() {splitTag()
})条件渲染优化
为了防止页面加载时显示空标签或错误信息我们添加了一个判断条件
div classflex gap-2 v-iftagList[0] ! 这样只有当用户输入了至少一个有效选项后才会渲染出标签列表。 TailwindCSS 样式重点讲解
类名作用flex, items-center, justify-center居中布局整个容器h-screen容器高度为视口全高rounded-2xl圆角大小为 1rembg-gray-400、bg-gray-200、bg-amber-200设置背景颜色p-8, p-4, p-1不同层级的内边距my-4上下外边距为 1remw-full宽度为 100%h-36高度为 9remtext-2xl字体大小为 1.5remfont-mono使用等宽字体gap-2flex 子元素之间间隔为 0.5remh-8高度为 2remrounded-2xl圆角为 1rem
这些 Tailwind 工具类帮助我们快速构建了一个简洁美观的输入界面和标签展示区域。 常量定义 组件路由
constants/index.js 添加组件预览常量
{id: 13,title: Random Choice Picker,image: https://50projects50days.com/img/projects-img/13-random-choice-picker.png,link: RandomChoicePicker,},router/index.js 中添加路由选项
{path: /RandomChoicePicker,name: RandomChoicePicker,component: () import(/projects/RandomChoicePicker.vue),},总结
标签输入组件涵盖Vue 3 的响应式系统、副作用监听、动态渲染以及 TailwindCSS 的灵活样式组合。
作为表单组件的一部分用于收集用户输入的多项数据。 下一篇我们将完成AnimatedNavigation组件一个非常有意思的动画的导航组件
