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>

　　

## 实现缩略图的效果

\1. 先加载所有的图片并显示到页面上；

\2. 使用vue-preview插件来实现缩略图效果；

\3. 如何使用缩略图组件呢：

+ 运行cnpm i vue-preview -S安装

+ 在 全局的配置文件globalConfig.js中，安装此组件：

```

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

```

+ 在页面中，先把获取到的图片，按照标准的格式做一层包装：为每个图片添加w和h属性；

+ 把官方提供的 例子中的img标签粘贴到页面中，去渲染数据就行了；

来源：博客园

作者：小白咚

链接：https://www.cnblogs.com/fdxjava/p/11641966.html