📅 我们继续 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可以轻松实现票的布局和排版！🚀