可能你疑惑为啥名字和功能不一样,哈哈哈,不要怀疑,这只是我打错名字懒得改了。。。
我们继续 50 个小项目挑战!—— RandomChoicePicker
组件
仓库地址:https://github.com/SunACong/50-vue-projects
项目预览地址:https://50-vue-projects.vercel.app/
使用 Vue 3 的 Composition API 和 语法结合 TailwindCSS 构建一个简单的标签输入组件。用户可以在文本框中输入多个选项,并通过逗号分隔,组件会自动将其拆分成可视化的“标签”展示出来。
,
分割输入内容。技术点 | 描述 |
---|---|
Vue 3 Composition API ( ) |
使用响应式变量管理组件状态 |
v-model 双向绑定 |
绑定 textarea 输入值 |
watchEffect 副作用监听 |
自动拆分并更新 tagList |
v-for 渲染列表 |
动态生成多个 Tag 元素 |
TailwindCSS 样式类 | 快速构建现代 UI |
<template>
<div class="flex h-screen items-center justify-center">
<div class="rounded-2xl bg-gray-400 p-8">
<h3 class="font-mono text-2xl">
Enter all of the choices divided by a comma (',').
<br />
Press enter when you're done
h3>
<textarea
class="my-4 h-36 w-full bg-gray-200 p-4"
placeholder="Enter choices here..."
v-model="textareaText">textarea>
<div class="flex gap-2" v-if="tagList[0] !== ''">
<div class="h-8 rounded-2xl bg-amber-200 p-1" v-for="item in tagList" :key="item">
{{ item }}
div>
div>
div>
div>
template>
<script setup>
import { ref, watchEffect } from 'vue'
const 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
将 的值与
textareaText
进行双向绑定:
<textarea v-model="textareaText">textarea>
并通过 watchEffect()
监听其变化,一旦发生变化就执行 splitTag()
方法,将输入内容以逗号分割为数组,并去除空格后推入 tagList
。
watchEffect(() => {
splitTag()
})
为了防止页面加载时显示空标签或错误信息,我们添加了一个判断条件:
<div class="flex gap-2" v-if="tagList[0] !== ''">
这样只有当用户输入了至少一个有效选项后,才会渲染出标签列表。
类名 | 作用 |
---|---|
flex , items-center , justify-center |
居中布局整个容器 |
h-screen |
容器高度为视口全高 |
rounded-2xl |
圆角大小为 1rem |
bg-gray-400 、bg-gray-200 、bg-amber-200 |
设置背景颜色 |
p-8 , p-4 , p-1 |
不同层级的内边距 |
my-4 |
上下外边距为 1rem |
w-full |
宽度为 100% |
h-36 |
高度为 9rem |
text-2xl |
字体大小为 1.5rem |
font-mono |
使用等宽字体 |
gap-2 |
flex 子元素之间间隔为 0.5rem |
h-8 |
高度为 2rem |
rounded-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
组件,一个非常有意思的动画的导航组件!