vue-preview图片预览组件用法

前言：
vue-preview是一个非常好用的移动端图片预览组件，简单易用，支持滑动换图，支持手势缩放，显示当前第几张和总共几张。
一、安装到项目中

npm i vue-preview -S

注：vue-preview版本号：^1.1.3
二、在main.js文件中导入该组件，并挂载到Vue身上

import VuePreview from 'vue-preview';
Vue.use(VuePreview);

三、在自己的组件中使用它

<div class="picBox">
	<vue-preview :slides="details" class="preview" style="display:inline-block;"></vue-preview>
</div>
<script>
export default {
    data() {
        return {
           details: [],
        };
    },
    methods: {
        async getThirdHaikEventList(val) {
			const params = {
				v: "v1.0",
				type: 8008,
				start: this.pageNumPhoto ? this.pageNumPhoto : '0',
				limit: '12',
				deviceIndexCode: val,
				beginTime: startTime,
				endTime: endTime,
			};
            let data = await this.$http.get('/bi/elevatorMonitor/getThirdHaikEventList', { params });
            if (data && Object.keys(data).length) {
				data.list.forEach(item => {
					item.w = 600;   //设置以大图浏览时的宽度
                    item.h = 400;     //设置以大图浏览时的高度
                    item.src = item.imageUrl;  //大图
                    item.msrc = item.imageUrl;  //小图
				})
				this.details = data.list;
				this.totalPhoto = data.total;
            }
		},
    },  
};
</script>

在App.vue给vue-preview组件设置样式:

//vue-preview 全局样式开始
.preview figure {
	float: left;
	width: 22%;
	height:auto;
	margin: 1.5%;
}
.preview figure img {
	width: 100%;
	height: 75%;
}
//vue-preview 全局样式结束

四、运行效果图如下
    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。
参考博客：
    vue-preview用法详解 https://www.cnblogs.com/ldq678/p/10917355.html