📅 我們繼續 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 響應式變量	控制 likes、hearts 和 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組件，一個類似打字機的組件，可以調節速度。🚀

感謝閱讀，歡迎點贊、收藏和分享 😊