vue图片预览实现
实现图片预览的方法
使用第三方库（如viewer.js）
安装viewer.js库：
npm install v-viewer在Vue项目中引入并注册：
import VueViewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(VueViewer)模板中使用：
<template>
<div class="images">
<img v-for="src in imgs" :src="src" :key="src" class="image">
</div>
</template>
<script>
export default {
data() {
return {
imgs: [
'image1.jpg',
'image2.jpg'
]
}
},
mounted() {
this.$viewerApi({
images: this.imgs
})
}
}
</script>使用Element UI的el-image组件
安装Element UI：
npm install element-ui引入组件：
import { Image } from 'element-ui'
Vue.use(Image)模板中使用：
<template>
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList">
</el-image>
</template>
<script>
export default {
data() {
return {
url: 'image1.jpg',
srcList: [
'image1.jpg',
'image2.jpg'
]
}
}
}
</script>自定义实现图片预览
创建预览组件：
<template>
<div class="preview-wrapper" v-show="visible" @click="close">
<img :src="currentImg" class="preview-img">
<div class="preview-actions">
<button @click.stop="prev">上一张</button>
<button @click.stop="next">下一张</button>
<button @click.stop="close">关闭</button>
</div>
</div>
</template>
<script>
export default {
props: {
imgs: Array,
index: Number,
visible: Boolean
},
computed: {
currentImg() {
return this.imgs[this.index]
}
},
methods: {
prev() {
this.$emit('update:index', (this.index - 1 + this.imgs.length) % this.imgs.length)
},
next() {
this.$emit('update:index', (this.index + 1) % this.imgs.length)
},
close() {
this.$emit('update:visible', false)
}
}
}
</script>
<style>
.preview-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.preview-img {
max-width: 80%;
max-height: 80%;
}
.preview-actions {
position: absolute;
bottom: 20px;
}
</style>使用Vant的ImagePreview组件
安装Vant：
npm install vant引入组件：
import { ImagePreview } from 'vant'
Vue.use(ImagePreview)调用预览：
ImagePreview({
images: [
'image1.jpg',
'image2.jpg'
],
startPosition: 0
})注意事项
- 大图预览需要考虑性能优化，可添加懒加载
- 移动端需考虑手势操作（缩放、滑动切换）
- 需要处理图片加载失败的情况
- 预览组件建议使用fixed定位，避免影响页面布局
