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
安装---需查看官网--
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