1.首先安裝 vue-preview 插件
npm i vue-preview -S
2.然后在 mian.js入口中引入
import VuePreview from ‘vue-preview’
Vue.use(VuePreview)
組件：
<div class="thumbs">
? <vue-preview :slides="details" class="preview" >
</div>
script 部分
data() {
return {
id:this.$route.params.id,//從路由中獲取的圖片id
? ? details: [],//縮略圖的數(shù)組
? }
},
created() {
? this.setPreview();
},
methods: {
getPhotoInfo() {
axios.get('/api/getimageInfo/' +this.id).then(res => {
if (res.data.status ==0) {
this.photoInfo = res.data.message[0];
? ? ? }
})
},
? setPreview:function () {
axios.get('/api/getthumimages/' +this.id).then(res => {
if (res.data.status ==0) {
res.data.message.forEach(item => {
item.w =600;
? ? ? ? ? item.h =400;
? ? ? ? ? item.msrc = item.src;
? ? ? ? });
? ? ? ? //把完整的數(shù)據(jù)保存到 details中
? ? ? ? this.details = res.data.message;
? ? ? }
})
}
},
style部分
.thumbs {
/deep/ .my-gallery {
display:flex;
? ? flex-wrap:wrap;
? ? figure {
width:30%;
? ? ? margin:5px;
? ? ? img {
width:100%;
box-shadow:0 0 8px #999;
? ? ? }
}
}
以上完成后，就可以看到有樣式的縮略圖了
