📅 我們繼續 50 個小項目挑戰！—— SplitLandingPage 組件
-
倉庫地址：https://github.com/SunACong/50-vue-projects
-
項目預覽地址：https://50-vue-projects.vercel.app/
在這篇文章中，我們將實現一個交互式的左右面板對比組件，當用戶將鼠標懸停在某一側時，該側會自動擴展以獲得更多展示空間，提供強烈的視覺聚焦效果 ?
適用于：商品對比、雙選項引導頁面、動態首頁背景等場景
🎯 組件目標
- 左右兩個全屏高度的面板
- 鼠標懸停在任一面板上時，該面板自動擴展至 75% 寬度，另一面板縮小至 25%
- 鼠標移出后恢復 50% 對半布局
- 背景支持圖片和透明遮罩，內容居中展示標題與按鈕
🛠? 技術實現點
- 使用 Vue 的
ref+reactive實現響應式狀態追蹤 - 使用 TailwindCSS 原子類管理布局、動畫、背景和文本樣式
- 利用
@mousemove和@mouseleave事件監聽鼠標位置 - 根據鼠標區域動態綁定 class 控制寬度動畫
🧱 SplitLandingPage.vue組件實現
<template><divclass="head-text flex h-screen items-center justify-center text-black"ref="container"@mousemove="handleMouseMove"@mouseleave="resetPanels"><!-- 左側面板 --><divref="leftSide":class="[ 'relative h-full transition-all duration-700 ease-in-out', activePanel === 'left' ? 'w-3/4' : activePanel === 'none' ? 'w-1/2' : 'w-1/4' ]"><div class="absolute inset-0 bg-[url(@/assets/ps.jpg)] bg-cover"></div><div class="absolute inset-0 bg-pink-300/50"></div><div class="absolute inset-0 flex flex-col items-center justify-center gap-10 text-white"><p class="text-6xl font-bold">Playstation 5</p><button class="rounded-lg bg-pink-500 px-6 py-2 text-white transition-all hover:bg-pink-600">BUY NOW</button></div></div><!-- 右側面板 --><divref="rightSide":class="[ 'relative h-full transition-all duration-700 ease-in-out', activePanel === 'right' ? 'w-3/4' : activePanel === 'none' ? 'w-1/2' : 'w-1/4' ]"><div class="absolute inset-0 bg-[url(@/assets/xbox.jpg)] bg-cover"></div><div class="absolute inset-0 bg-gray-200/50"></div><div class="absolute inset-0 flex flex-col items-center justify-center gap-10 text-white"><p class="text-6xl font-bold">Xbox Series X</p><button class="rounded-lg bg-gray-700 px-6 py-2 text-white transition-all hover:bg-gray-800">BUY NOW</button></div></div></div>
</template>
🧩 重點效果實現
const handleMouseMove = (e) => {if (!container.value) returnconst containerWidth = container.value.offsetWidthconst mouseX = e.clientXactivePanel.value = mouseX < containerWidth / 2 ? 'left' : 'right'
}const resetPanels = () => {activePanel.value = 'none'
}
handleMouseMove：根據鼠標位置設置當前激活面板resetPanels：鼠標移出容器，恢復為中間對稱狀態
🎨 TailwindCSS 樣式重點講解
| 類名 | 作用說明 |
|---|---|
w-3/4、w-1/2、w-1/4 | 控制寬度動態響應 |
transition-all | 添加平滑過渡效果 |
duration-700 | 設置動畫時長 700ms |
ease-in-out | 提升動畫曲線體驗 |
absolute inset-0 | 實現背景圖和遮罩的層疊與填充 |
bg-[url(...)] bg-cover | 加載背景圖并保持填充 |
bg-pink-300/50 | 半透明粉色遮罩層 |
text-6xl font-bold | 設置標題文字樣式 |
hover:bg-pink-600 | 按鈕 hover 態變色 |
🧾 常量定義 + 組件路由建議
constants/index.js 添加組件預覽常量：
export const projectList = [
{id: 7,title: 'Split Landing Page',image: 'https://50projects50days.com/img/projects-img/7-split-landing-page.png',link: 'SplitLandingPage',},
]
router/index.js 中添加路由選項：
{path: '/SplitLandingPage',name: 'SplitLandingPage',component: () => import('@/projects/SplitLandingPage.vue'),},
🧠 小結
通過 Vue 的響應式狀態 + Tailwind 的原子類動畫能力，我們成功實現了一個交互性十足的左右懸停擴展對比組件。它不僅視覺吸引力強，而且極其易于維護和擴展。如果你在構建商城首頁、交互引導頁或產品對比模塊，這個模式可以完美復用！🚀
👉 下一篇，我們將完成一個簡單靈動的 FromWave組件，適合任何表單搜集頁面！🚀
