Vue--缩略图

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

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