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