标签：col import xxxxx ret 要求 img list rom lse
Vue-preview是一个非常好用的移动端图片预览的组件，简单易用是它的一大特点，支持滑动换图，支持手势缩放，显示当前时第几张和总共多少张。
vue-preview1.1.3版本跟之前有了一点变化，现把具体用法记录一下。
1.安装
npm i vue-preview -S
2.在main.js文件中导入该组件，并挂载到Vue身上
import VuePreview from ‘vue-preview‘;
Vue.use(VuePreview);
3.在自己的组件中使用它
<template>
<div class="thumbs">
<vue-preview :slides="thumbsList" class="imgPrev"></vue-preview>
</div>
</template>
<script>
export default {
data() {
return {
thumbsList: [],
};
},
methods: {
getThumbsList(){
this.$ajax({
method: "get",
url: "/thumbs/" ,
}).then(response => {
var data = response.data
if (data.Status == 0) {
data.Data.forEach(item => {
item.w = 600; //设置以大图浏览时的宽度
item.h = 400; //设置以大图浏览时的高度
item.src = item.img_url; //大图
item.msrc = item.img_url; //小图
});
this.thumbsList = data.Data
} else {
Toast(‘获取图片信息失败！‘);
}
});
},
},
};
</script>
4.运行效果如下图
（1）小图，这个可以根据自己的需要来写下样式
（2）大图，这个是点击上面的小图后，展示的大图。
这里需要说明一下，vue-preview规定，用来绑定的数据源必须是一个数组，数组里的每一项都要是个js对象，该js对象应该形如 {w: 600, h: 500, src: xxxx, msrc: xxxxxx}
其中，w是预览时的大图的图片宽度，h属性是预览时的大图的图片高度。src是预览时大图的url，msrc属性是小图的url。
这几个属性是vue-preview规定死的，必须用这几个属性。
我这个例子里，服务器发过来的数据，存储图片url的属性是.img_url，跟vue-preview要求的不一样，所以不能直接所谓数据源，因此，我们拿到服务端数据后，通过forEach语句，给data重新添加了2个属性，一个是src，一个是msrc。
标签：col import xxxxx ret 要求 img list rom lse
原文地址：https://www.cnblogs.com/ldq678/p/10917355.html
