vue 实现图片放大
使用 Vue 实现图片放大功能
基础实现：CSS 放大
通过 CSS 的 transform: scale() 和 transition 实现简单的鼠标悬停放大效果。
<template>
<div class="image-container">
<img
src="your-image.jpg"
@mouseover="zoomIn"
@mouseout="zoomOut"
:style="imgStyle"
/>
</div>
</template>
<script>
export default {
data() {
return {
isZoomed: false
}
},
computed: {
imgStyle() {
return {
transform: this.isZoomed ? 'scale(1.5)' : 'scale(1)',
transition: 'transform 0.3s ease'
}
}
},
methods: {
zoomIn() {
this.isZoomed = true
},
zoomOut() {
this.isZoomed = false
}
}
}
</script>
<style scoped>
.image-container {
overflow: hidden;
width: 300px;
height: 200px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>使用第三方库：vue-zoomer
对于更复杂的交互（如点击放大、拖拽查看细节），可以使用专用库如 vue-zoomer。
安装依赖：
npm install vue-zoomer实现代码：
<template>
<zoomer
style="width: 500px; height: 300px"
:zoomed="zoomed"
@shrink="zoomed = false"
>
<img src="your-image.jpg" @click="zoomed = true"/>
</zoomer>
</template>
<script>
import { Zoomer } from 'vue-zoomer'
export default {
components: { Zoomer },
data() {
return {
zoomed: false
}
}
}
</script>模态框放大方案
通过模态框实现全屏查看，适合需要查看高清细节的场景。
<template>
<div>
<img
src="thumbnail.jpg"
@click="showModal = true"
class="thumbnail"
/>
<div v-if="showModal" class="modal" @click="showModal = false">
<img src="fullsize-image.jpg" class="fullsize-image"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false
}
}
}
</script>
<style scoped>
.thumbnail {
width: 200px;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
}
.fullsize-image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
}
</style>注意事项
- 大尺寸图片需要预加载避免放大时闪烁
- 移动端需添加手势支持（如双指缩放）
- 性能优化：对高频操作使用防抖/节流
- 无障碍访问：为放大操作添加ARIA标签
每种方案适用于不同场景：CSS方案适合简单悬停效果，vue-zoomer适合产品展示，模态框方案适合查看高清大图。
