安装---需查看官网--
cnpm i vue-preview -s
<!-- 缩略图区域 -->
<div class="thumb-img-list">
<!-- 使用 v-for 循环渲染缩略图 -->
<img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" @click="$preview.open(index, photolist)" :key="index">
</div>
获取后台接口---必须设置宽和高
getThumbs() {
// 获取缩略图
this.$http.get("api/getthumbsimages/" + this.id).then(res => {
if(res.body.status === 0){
res.body.message.forEach(item => {
item.w = 600;
item.h = 400;
});
}
});
}
## 实现缩略图的效果
\1. 先加载所有的图片并显示到页面上;
\2. 使用vue-preview
插件来实现缩略图效果;
\3. 如何使用缩略图组件呢:
+ 运行cnpm i vue-preview -S
安装
+ 在 全局的配置文件globalConfig.js
中,安装此组件:
```
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
```
+ 在页面中,先把获取到的图片,按照标准的格式做一层包装:为每个图片添加w
和h
属性;
+ 把官方提供的 例子中的img