前言

原先寫過(guò)類似的知識(shí)點(diǎn)：

1. 詳細(xì)分析el-breadcrumb 面包屑的基本知識(shí)（附Demo）
2. 詳細(xì)分析el-card中的基本知識(shí)（附Demo）

本篇博客將介紹如何通過(guò)點(diǎn)擊按鈕切換不同的圖片，并優(yōu)化交互體驗(yàn)，使頁(yè)面更流暢、響應(yīng)更快

主要的知識(shí)點(diǎn)：

• Vue 3 組件化開(kāi)發(fā) - 通過(guò) setup 組合式 API 進(jìn)行數(shù)據(jù)管理
• 動(dòng)態(tài)綁定 class - 根據(jù)當(dāng)前選中的圖片高亮按鈕
• 過(guò)渡動(dòng)畫 transition - 讓圖片切換更流暢
• 圖片預(yù)加載 - 避免切換時(shí)的卡頓
• 樣式優(yōu)化 - 讓按鈕和圖片展示更美觀

1. Demo

最初始的版本Demo：

<template><div><!-- 按鈕組 --><div class="button-group"><button v-for="image in images" :key="image.id" @click="currentImage = image.src">{{ image.label }}</button></div><!-- 動(dòng)態(tài)展示圖片 --><div class="image-container"><img v-if="currentImage" :src="currentImage" alt="Dynamic Image" /></div></div>
</template><script setup>
import { ref } from 'vue'// 當(dāng)前選中的圖片
const currentImage = ref(null)// 定義按鈕與對(duì)應(yīng)的圖片路徑（public 目錄下的圖片）
const images = [{ id: 'img1', label: '圖片1', src: '/image1.png' },{ id: 'img2', label: '圖片2', src: '/image2.png' },{ id: 'img3', label: '圖片3', src: '/image3.png' },{ id: 'img4', label: '圖片4', src: '/image4.png' }
]
</script><style scoped>
.button-group {display: flex;gap: 10px;margin-bottom: 20px;
}
button {padding: 8px 12px;cursor: pointer;
}
.image-container {text-align: center;
}
img {max-width: 100%;height: auto;
}
</style>

截圖如下：

2. 升級(jí)Demo

這一版本有個(gè)缺點(diǎn)，就是卡頓，但是他的樣式很好看！

• 圖片加載問(wèn)題：每次點(diǎn)擊都會(huì)重新加載圖片，導(dǎo)致延遲
• 樣式導(dǎo)致的渲染卡頓：box-shadow、border 變化可能導(dǎo)致重繪
• 事件未優(yōu)化：Vue 響應(yīng)式 ref 更新時(shí)，可能導(dǎo)致不必要的 DOM 計(jì)算

更改相關(guān)樣式以及按鈕：

<template><div class="container"><!-- 按鈕組 --><div class="button-group"><button v-for="image in images" :key="image.id" @click="currentImage = image.src" class="image-button"><img :src="image.src" alt="Preview" class="button-thumbnail" /><span>{{ image.label }}</span></button></div><!-- 動(dòng)態(tài)展示圖片 --><div class="image-container"><img v-if="currentImage" :src="currentImage" alt="Dynamic Image" class="main-image" /></div></div>
</template><script setup>
import { ref } from 'vue'// 當(dāng)前選中的圖片
const currentImage = ref(null)// 定義按鈕與對(duì)應(yīng)的圖片路徑（public 目錄下的圖片）
const images = [{ id: 'img1', label: '圖片1', src: '/favicon.ico' },{ id: 'img2', label: '圖片2', src: '/image2.png' },{ id: 'img3', label: '圖片3', src: '/image3.png' },{ id: 'img4', label: '圖片4', src: '/image4.png' },{ id: 'img5', label: '圖片5', src: '/deepSeaField.png' },{ id: 'img6', label: '圖片6', src: '/image2.png' },{ id: 'img7', label: '圖片7', src: '/image3.png' },{ id: 'img8', label: '圖片8', src: '/image4.png' }
]
</script><style scoped>
/* 整體容器 */
.container {max-width: 800px;margin: 0 auto;text-align: center;
}/* 按鈕組：使用網(wǎng)格布局 */
.button-group {display: grid;grid-template-columns: repeat(4, 1fr); /* 4 列布局 */gap: 15px;margin-bottom: 20px;
}/* 按鈕樣式 */
.image-button {display: flex;flex-direction: column;align-items: center;justify-content: center;background: white;border: 2px solid #ddd;border-radius: 12px;padding: 10px;cursor: pointer;transition: all 0.3s ease-in-out;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}.image-button:hover {background: #f0f0f0;transform: scale(1.05);
}/* 按鈕里的小縮略圖 */
.button-thumbnail {width: 50px;height: 50px;border-radius: 8px;object-fit: cover;margin-bottom: 5px;
}/* 主要圖片 */
.image-container {margin-top: 20px;
}.main-image {max-width: 100%;height: auto;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>

截圖如下：

后續(xù)繼續(xù)整改優(yōu)化：

<template><div class="container"><!-- 按鈕組 --><div class="button-group"><button v-for="image in images" :key="image.id" @click="currentImage = image.src" class="image-button"><img :src="image.src" alt="Preview" class="button-thumbnail" /><span>{{ image.label }}</span></button></div><!-- 動(dòng)態(tài)展示圖片 --><div class="image-container"><img v-if="currentImage" :src="currentImage" alt="Dynamic Image" class="main-image" /></div></div>
</template><script setup>
import { ref } from 'vue'// 當(dāng)前選中的圖片
const currentImage = ref(null)// 定義按鈕與對(duì)應(yīng)的圖片路徑（public 目錄下的圖片）
const images = [{ id: 'img1', label: '圖片1', src: '/favicon.ico' },{ id: 'img2', label: '圖片2', src: '/image2.png' },{ id: 'img3', label: '圖片3', src: '/image3.png' },{ id: 'img4', label: '圖片4', src: '/image4.png' },{ id: 'img5', label: '圖片5', src: '/deepSeaField.png' },{ id: 'img6', label: '圖片6', src: '/image2.png' },{ id: 'img7', label: '圖片7', src: '/image3.png' },{ id: 'img8', label: '圖片8', src: '/image4.png' }
]
</script><style scoped>
/* 整體容器 */
.container {max-width: 1000px;margin: 0 auto;text-align: center;
}/* 按鈕組：一行排列 */
.button-group {display: flex;justify-content: space-around;gap: 10px;margin-bottom: 20px;flex-wrap: wrap; /* 保證小屏設(shè)備時(shí)自動(dòng)換行 */
}/* 按鈕樣式 */
.image-button {display: flex;flex-direction: column;align-items: center;justify-content: center;background: white;border: 2px solid #ddd;border-radius: 12px;padding: 10px;cursor: pointer;transition: all 0.3s ease-in-out;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);width: 100px; /* 固定寬度 */height: 120px; /* 固定高度 */
}.image-button:hover {background: #f0f0f0;transform: scale(1.05);
}/* 按鈕里的小縮略圖 */
.button-thumbnail {width: 50px;height: 50px;border-radius: 8px;object-fit: cover;margin-bottom: 5px;
}/* 主要圖片 */
.image-container {margin-top: 20px;display: flex;justify-content: center;align-items: center;height: 600px; /* 固定高度，居中展示大圖 */border: 2px solid #ddd;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}.main-image {max-width: 100%;max-height: 100%; /* 確保圖片不會(huì)超出容器 */object-fit: contain; /* 保持圖片比例 */
}
</style>

截圖如下：

3. 終極Demo

后續(xù)發(fā)現(xiàn)會(huì)很卡頓

優(yōu)化點(diǎn)

• 去除黑色邊框：
  由于 <button> 在不同瀏覽器默認(rèn)會(huì)有 outline 選中效果，添加 outline: none 解決
  通過(guò) border: none 避免額外邊框影響

• 流暢過(guò)渡動(dòng)畫：
  按鈕縮略圖 采用 background-image，提高圖片加載速度
  主圖片切換 采用 Vue Transition 并優(yōu)化 opacity 過(guò)渡，使切換更順暢

• 減少卡頓：
  預(yù)加載所有圖片，防止首次切換時(shí)加載延遲
  優(yōu)化 changeImage 邏輯，避免重復(fù)更新 currentImage

<template><div class="container"><!-- 按鈕組 --><div class="button-group"><buttonv-for="image in images":key="image.id"@click="changeImage(image.src)"class="image-button":class="{ active: currentImage === image.src }"><div class="button-thumbnail" :style="{ backgroundImage: `url(${image.src})` }"></div><span>{{ image.label }}</span></button></div><!-- 動(dòng)態(tài)展示圖片 --><div class="image-container"><transition name="fade" mode="out-in"><img v-if="currentImage" :src="currentImage" alt="Dynamic Image" class="main-image" /></transition></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'// 定義按鈕與對(duì)應(yīng)的圖片路徑
const images = [{ id: 'img1', label: '未來(lái)制造', src: '/futureManufacturing.png' },{ id: 'img2', label: '未來(lái)材料', src: '/futureMaterials.png' },{ id: 'img3', label: '未來(lái)信息', src: '/futureInformation.png' },{ id: 'img4', label: '未來(lái)能源', src: '/futureEnergy.png' },{ id: 'img5', label: '未來(lái)醫(yī)療', src: '/futureMedical.png' },{ id: 'img6', label: '人工智能', src: '/artificialIntelligence.png' },{ id: 'img7', label: '數(shù)字經(jīng)濟(jì)', src: '/digitalEconomy.png' },{ id: 'img8', label: '低空經(jīng)濟(jì)', src: '/lowAltitudeEconomy.png' },{ id: 'img9', label: '深海領(lǐng)域', src: '/deepSeaField.png' }
]// 默認(rèn)選中第一張圖片
const currentImage = ref(images[0].src)// 切換圖片
const changeImage = (src) => {if (currentImage.value !== src) {currentImage.value = src}
}// 預(yù)加載圖片，減少切換時(shí)的卡頓
const preloadImages = () => {images.forEach(image => {const img = new Image()img.src = image.src})
}onMounted(preloadImages)
</script><style scoped>
/* 整體容器 */
.container {max-width: 1200px;margin: 0 auto;text-align: center;
}/* 按鈕組 */
.button-group {display: flex;justify-content: center;gap: 10px;flex-wrap: nowrap;overflow-x: auto;padding: 10px 0;scrollbar-width: none; /* 隱藏滾動(dòng)條 */
}/* 按鈕樣式 */
.image-button {display: flex;flex-direction: column;align-items: center;justify-content: center;background: white;border: none;border-radius: 10px;padding: 5px;cursor: pointer;transition: transform 0.2s ease, background 0.2s ease;width: 90px;height: 110px;outline: none; /* 去除點(diǎn)擊時(shí)的黑框 */
}.image-button:hover {transform: scale(1.05);
}/* 選中狀態(tài) */
.image-button.active {background: #e3f2fd;box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}/* 按鈕里的小縮略圖 */
.button-thumbnail {width: 50px;height: 50px;border-radius: 8px;background-size: cover;background-position: center;margin-bottom: 5px;
}/* 主要圖片 */
.image-container {will-change: transform, opacity;margin-top: 10px;display: flex;justify-content: center;align-items: center;height: 600px;border-radius: 10px;width: 100%; /* 增加寬度 */max-width: 1200px; /* 限制最大寬度，防止過(guò)大 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);overflow: hidden;
}.main-image {max-width: 100%;max-height: 100%;object-fit: contain;
}/* 過(guò)渡動(dòng)畫 */
.fade-enter-active, .fade-leave-active {transition: opacity 0.3s ease-in-out;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>