Vue--缩略图

安装---需查看官网--

cnpm i vue-preview -s

 

?

1 2 3 4 5

<!-- 缩略图区域 -->     <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>

　　获取后台接口---必须设置宽和高

?

1 2 3 4 5 6 7 8 9 10 11

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标签粘贴到页面中，去渲染数据就行了；