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.在自己的组件中使用它

　　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。