VUE货架详情之缩略图previewww

最新推荐文章于 2024-08-08 14:15:57 发布

广东话的蛇皇

最新推荐文章于 2024-08-08 14:15:57 发布

阅读量487

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/107976258

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

VUE货架详情之缩略图

引入并使用VuePreview

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

缩略图div

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

数据装载

getThumbs(){
				this.$http.get("数据接口" + 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
					}
				})
			}