当前位置: 首页 > ops >正文

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleClickHeart(双击爱心)

📅 我们继续 50 个小项目挑战!—— DoubleClickHeart组件

仓库地址:https://github.com/SunACong/50-vue-projects

项目预览地址:https://50-vue-projects.vercel.app/

在这里插入图片描述


使用 Vue 3 的 Composition API(<script setup>)结合 TailwindCSS 和 Font Awesome 创建一个双击点赞动画组件。用户可以双击图片区域触发一个“❤️ 爱心飞出”动画,并统计点赞次数。

这个交互体验非常适用于社交媒体、照片墙、内容点赞等场景。


🎯 组件目标

  • 用户双击图片区域时显示爱心动画
  • 显示当前点赞总次数
  • 动画结束后自动移除爱心元素
  • 使用 Vue 3 Composition API 管理状态
  • 使用 TailwindCSS 构建 UI 样式与布局
  • 支持动态定位和点击时间判断

⚙️ 技术实现点

技术点描述
Vue 3 <script setup>使用响应式变量管理点赞数、爱心列表
ref 响应式变量控制 likeshearts 和 DOM 容器引用
双击检测逻辑判断两次点击时间间隔是否小于 800ms
动态创建元素在点击位置生成爱心图标并添加动画
TailwindCSS 样式设置图片容器、文字样式、动画基础属性
自定义字体加载使用 JS 动态加载 Oswald 字体与 Font Awesome 图标库
CSS 关键帧动画实现放大淡出的爱心动画效果

🧱 组件实现

模板结构 <template>

<template><div class="flex min-h-screen flex-col items-center justify-center overflow-hidden font-[Oswald] text-white"><h3 class="mb-0 text-center">Double click on the image to<i class="fas fa-heart text-red-600"></i>it</h3><small class="mb-5 block text-center">You liked it<span>{{ likes }}</span>times</small><!-- 图片容器 --><divclass="relative h-[440px] w-[300px] cursor-pointer overflow-hidden bg-cover bg-center shadow-lg":style="{ backgroundImage: `url(${imageUrl})` }"@click="handleClick"ref="container"><iv-for="heart in hearts":key="heart.id"class="fas fa-heart heart-anim absolute text-red-600":style="{ top: heart.y + 'px', left: heart.x + 'px' }"></i></div></div>
</template>

脚本逻辑 <script setup>

<script setup>
import { onMounted, ref } from 'vue'const likes = ref(0)
const hearts = ref([])
const container = ref(null)
let clickTime = 0const handleClick = (e) => {const now = new Date().getTime()if (clickTime === 0) {clickTime = now} else {if (now - clickTime < 800) {createHeart(e)clickTime = 0} else {clickTime = now}}
}const createHeart = (e) => {const rect = container.value.getBoundingClientRect()const xInside = e.clientX - rect.leftconst yInside = e.clientY - rect.topconst id = Date.now()hearts.value.push({ id, x: xInside, y: yInside })likes.value++setTimeout(() => {hearts.value = hearts.value.filter((h) => h.id !== id)}, 1000)
}const imageUrl ='https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'onMounted(() => {const fontLink = document.createElement('link')fontLink.href = 'https://fonts.googleapis.com/css?family=Oswald'fontLink.rel = 'stylesheet'document.head.appendChild(fontLink)const faLink = document.createElement('link')faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'faLink.rel = 'stylesheet'faLink.crossOrigin = 'anonymous'document.head.appendChild(faLink)
})
</script>

样式部分 <style scoped>

<style scoped>
.heart-anim {position: absolute;animation: grow 0.6s linear;transform: translate(-50%, -50%) scale(0);
}@keyframes grow {to {transform: translate(-50%, -50%) scale(10);opacity: 0;}
}
</style>

🔍 重点效果实现

✅ 双击事件判断

通过记录点击时间戳来判断是否为双击行为:

const now = new Date().getTime()
if (now - clickTime < 800) {createHeart(e)clickTime = 0
} else {clickTime = now
}

这是模拟原生 dblclick 事件的一种方式,同时保留了对单击行为的控制。

💡 动态生成爱心图标

每次双击会根据点击坐标生成一个爱心图标:

hearts.value.push({ id, x: xInside, y: yInside })

并在一秒后自动从数组中移除,以实现动画结束后的清理。

🎨 动画设计

使用 CSS 关键帧实现放大并透明消失的效果:

@keyframes grow {to {transform: translate(-50%, -50%) scale(10);opacity: 0;}
}

配合 Tailwind 的 absolute 定位,实现了视觉上“从点击点飞出”的效果。


🎨 TailwindCSS 样式重点讲解

类名作用
min-h-screen, flex-col, items-center, justify-center居中布局
font-[Oswald], text-white字体与文字颜色
relative, absolute心形图标的绝对定位
h-[440px] w-[300px]固定图片容器大小
bg-cover bg-center设置背景图片居中覆盖
cursor-pointer鼠标悬停为手型
overflow-hidden防止爱心动画溢出容器
shadow-lg添加阴影提升层次感
text-red-600爱心颜色设置为红色

这些类帮助我们快速构建了一个美观、互动性强的点赞组件。


📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量:

{id: 29,title: 'Double Click Heart',image: 'https://50projects50days.com/img/projects-img/29-double-click-heart.png',link: 'DoubleClickHeart',},

router/index.js 中添加路由选项:

{path: '/DoubleClickHeart',name: 'DoubleClickHeart',component: () => import('@/projects/DoubleClickHeart.vue'),},

🏁 总结

基于 Vue 3 和 TailwindCSS 的双击点赞动画组件不仅实现了基本的交互功能,它非常适合用于社交平台、图片浏览、内容互动等需要增强用户体验的场景。

你可以进一步扩展此组件的功能包括:

  • ✅ 添加音效反馈(如“滴”一声)
  • ✅ 支持移动端触摸双击识别
  • ✅ 支持本地存储点赞数(使用 localStorage)
  • ✅ 添加粒子爆炸或其他动画效果
  • ✅ 将组件封装为 <DoubleHeartImage /> 可复用组件

👉 下一篇,我们将完成AutoTextEffect组件,一个类似打字机的组件,可以调节速度。🚀

感谢阅读,欢迎点赞、收藏和分享 😊

http://www.xdnf.cn/news/15443.html

相关文章:

  • netstat -tlnp | grep 5000
  • Swift实现股票图:从基础到高级
  • python的形成性考核管理系统
  • 并发-原子变量类
  • 【MCU控制 初级手札】1.1 电阻
  • 现代CSS实战:用变量与嵌套重构可维护的前端样式
  • 使用 Java 获取 PDF 页面信息(页数、尺寸、旋转角度、方向、标签与边框)
  • Flink双流实时对账
  • 大语言模型零样本情感分析实战:无需机器学习训练,96%准确率实现指南
  • 云手机隐私保护指南:如何保障账号与数据的云端安全?
  • 虚拟机删除操作
  • IELTS 阅读C15-test1-passage 2 复盘
  • React源码6 三大核心模块之一:commit, finishConcurrentRender函数
  • 24.找到列表中最大或最小值的索引
  • Pitaya 是一个简单、快速、轻量级的游戏服务器框架,它为分布式多人游戏和服务器端应用程序提供了一个基本的开发框架
  • 优雅的Java:01.数据更新如何更优雅
  • Python学习之路(十二)-开发和优化处理大数据量接口
  • 从springcloud-gateway了解同步和异步,webflux webMvc、共享变量
  • S7-200 SMART PLC:不同CPU及数字量 IO 接线全解析
  • 构建强大的物联网架构所需了解的一切
  • Janitor AI重塑人机交互的沉浸式智能体验
  • 大型语言模型(LLM)的技术面试题
  • 【机器人】REGNav 具身导航 | 跨房间引导 | 图像目标导航 AAAI 2025
  • 【算法-BFS 解决最短路问题】探索BFS在图论中的应用:最短路径问题的高效解法
  • docker停止所有容器和删除所有镜像
  • 【Docker基础】Dockerfile指令速览:高级构建指令详解
  • 闲庭信步使用图像验证平台加速FPGA的开发:第十六课——图像五行缓存的FPGA实现
  • 常见的 Commit 描述 分类及示例
  • 2025-07-15通过边缘线检测图像里的主体有没有出血
  • 2025-07-15 李沐深度学习6——Softmax回归