50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater（喝水记录组件）
📅 我们继续 50 个小项目挑战！—— DrinkWater组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个互动式的“每日喝水进度追踪”组件。用户可以通过点击玻璃杯按钮来更新已喝水量，并实时看到水位上升动画和剩余水量变化。
🎯 组件目标
- 显示每日喝水目标为 2 升（2000ml）
- 每个杯子代表 250ml
- 点击杯子增加当前饮水量
- 动态显示剩余水量和已喝水量
- 使用 TailwindCSS 快速构建现代 UI 界面
- 添加水位上升动画效果
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 Composition API (<script setup>) | 使用响应式变量管理组件状态 |
ref 响应式变量 | 控制当前饮水量 |
@click 事件绑定 | 用户点击玻璃杯触发饮水动作 |
:style 动态绑定样式 | 控制水位高度 |
v-if 条件渲染 | 只有喝水后才显示已喝水量 |
| TailwindCSS 动画与布局 | 构建美观的交互界面 |
🧱 组件实现
模板结构 <template>
<template><div class="flex h-screen flex-col items-center justify-center gap-8 text-white"><h1 class="font-mono text-3xl">Drink Water</h1><h3 class="font-mono">Goal: 2 Liters</h3><divclass="relative flex h-1/4 w-32 flex-col items-center justify-center rounded-b-3xl border-2 text-center overflow-hidden"><!-- 水的进度条 --><div class="absolute bottom-0 left-0 right-0 bg-blue-500 transition-all duration-500 ease-out":style="{ height: `${currentAmount / 8 * 100}%` }"></div><!-- 剩余水量显示 --><div class="relative z-10"><div class="text-2xl">{{ (2000 - currentAmount * 250) / 1000 }}L</div><div>Remained</div></div><!-- 已喝水量显示 --><div class="absolute top-2 text-lg font-bold" v-if="currentAmount > 0">{{ currentAmount * 250 }}ml</div></div><p class="font-mono">Select how many glasses of water that you have drank</p><div class="flex flex-wrap items-center justify-center gap-4"><div:class="['h-24 w-8 basis-1/5 cursor-pointer rounded-b-2xl border-2 pt-5 text-center transition-all duration-300 ease-in-out',item <= currentAmount ? 'bg-blue-500' : 'bg-gray-500',]"v-for="item in 8":key="item"@click="drink(item)">250 ml</div></div></div>
</template>
脚本逻辑 <script setup>
<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue'const currentAmount = ref(0) // 当前水量（单位：杯数）const drink = (amount) => {currentAmount.value = amount
}
</script>
🔍 重点效果实现
✅ 水杯点击交互
每个水杯表示 250ml，共 8 杯达成 2000ml：
<divv-for="item in 8":key="item"@click="drink(item)">
点击任意一杯时，将当前水量设置为该杯对应数值。
💧 水位动态增长动画
我们通过 :style 动态控制水位高度：
<div :style="{ height: `${currentAmount / 8 * 100}%` }"
></div>
并配合 Tailwind 的过渡类实现平滑动画：
transition-all duration-500 ease-out
📊 剩余水量计算展示
通过公式计算出剩余水量并以升为单位显示：
{{ (2000 - currentAmount * 250) / 1000 }}L
🖼️ 水杯状态视觉反馈
根据是否已点击，切换背景颜色：
:class="[item <= currentAmount ? 'bg-blue-500' : 'bg-gray-500']"
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
flex, items-center, justify-center | 居中布局整个容器 |
h-screen, flex-col | 全屏高度 + 纵向排列 |
gap-8 | 各元素之间间距为 2rem |
rounded-b-3xl | 底部圆角为 1.5rem |
border-2 | 边框宽度为 2px |
overflow-hidden | 防止水位溢出容器 |
h-24, w-8 | 水杯大小为 6rem × 2rem |
pt-5 | 上内边距为 1.25rem |
transition-all duration-500 | 过渡动画持续时间为 0.5 秒 |
cursor-pointer | 鼠标悬停变为可点击指针 |
text-2xl, text-lg | 不同层级字体大小 |
font-bold, font-mono | 加粗或等宽字体 |
这些 Tailwind 工具类帮助我们快速构建了一个互动性强、视觉反馈明确的喝水追踪组件。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 16,title: 'Drink Water',image: 'https://50projects50days.com/img/projects-img/16-drink-water.png',link:
router/index.js 中添加路由选项：
{path: '/DrinkWater',name: 'DrinkWater',component: () => import('@/projects/DrinkWater.vue'),},
🏁 总结
喝水进度追踪组件不仅功能实用，非常适合用于健康类应用、习惯养成类仪表盘或个人追踪页面。
你可以进一步扩展的功能包括：
- 支持本地存储记录每天饮水情况
- 添加“重置今日饮水”按钮
- 支持图表可视化统计趋势
- 支持通知提醒喝水
- 支持主题切换（暗色/亮色）
👉 下一篇，我们将完成MovieApp组件，一个常见的电影网站常用的卡片式展示，利用tailwindcss可以轻松实现票的布局和排版！🚀