vue-preview使用方法步骤

关注

原创最新推荐文章于 2026-08-31 11:27:34 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

卫衣 / 双肩包 / T 恤/羽绒服等任选，下单送 CSDN 年卡程序员周边任选一款实物，直接赠送 CSDN 会员年卡+ Coding Plan，写代码学习装备一起拿下立即抢购

1.安装

cnpm i vue-preview -S

2.在main.js中加载：

import VuePreview from'vue-preview'
Vue.use(VuePreview)

3在需要引入图片的地方中加入代码：

<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">

4.定义缩略图数组存放从接口获得的图片

export default{
	data(){
		return{
			id:this.$route.params.id,//从路由中获取到的图片Id
			photoinfo:{},//图片详情
			list:[]//缩略图的数组
		}
	},

5.定义方法获取缩略图

getThumbs(){
				//获取缩略图
				this.$http.get('api/getthumimages/'+this.id).then(result=>{
					if(result.body.status === 0){
						//循环每个图片数据，补全宽和高
						result.body.message.forEach(item=>{
							item.w = 600;
							item.h = 400;
						});
						
						this.list = result.body.message;
					}
				})
			}