v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）

前言： 之前项目需求，需要找一个预览图的组件，最开始，找了vue-preview组件。因为vue-preview是直接引入 < vue-preview>这个标签，无法看到对组件里面的图片img进行操作。后来，需求变更，需要在缩略图下面添加文字，所以，又在网上找了v-viewer组件，发现这个组件是缩略图功能还挺齐全的，文档资料也很详细，在此记录一下。（移动端用vant-ui的imgpreview挺不错的）

一、先安装依赖

npm install v-viewer --save

二、在main.js内引用并注册调用

//引入v-viewer
//注册
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
// 使用 
Vue.use(Viewer);
Viewer.setDefaults({
    'inline':false,//是否直接展示
    'button':true, //右上角按钮
    "navbar": true, //底部缩略图
    "title": true, //当前图片标题
    "toolbar": true, //底部工具栏
    "tooltip": true, //显示缩放百分比
    "movable": true, //是否可以移动
    "zoomable": true, //是否可以缩放
    "rotatable": true, //是否可旋转
    "scalable": true, //是否可翻转
    "transition": true, //使用 CSS3 过度
    "fullscreen": true, //播放时是否全屏
    "keyboard": true, //是否支持键盘
    "url": "data-source",
    debug: true,
    defaultOptions: {
      zIndex: 9999
    }
});

三、在vue页面中使用

<template>
	<div v-viewer="options" class="images clearfix" v-if="detailShow">
				<template v-for="{source, thumbnail ,index,captureTime} in images">
					<template>
						<div class="imgList">
							<img 
							:src="thumbnail"
							onerror="this.src='http://xxxx-smartgo.oss-cn-shanghai.aliyuncs.com/haik/placeholder.png'" 
							:data-source="source" 
							class="image" 
							:key="index" alt="">
							<i class="imageDate">
								<i>{{captureTime}}</i>
							</i>
						</div>
					</template>
				</template>
    		</div>
</template>
<script>
export default {
	data() {
    	return {
    		options: {
				toolbar: true,
				url: 'data-source'
      		},
      		sourceImages:[],
			images:[],
    	}
	},
	methods:{
		handleClick(row) {//查看按钮
			this.getThirdHaikEventList(row.indexCode);
      	},
		//根据设备获取报警图片
		async getThirdHaikEventList(val) {
			this.loading = true;
            const params = {
				v: "v1.0",
				type: 8008,
				start: this.pageNumPhoto ? this.pageNumPhoto : '0',
				limit: '12',
				deviceIndexCode: val,
				beginTime: startTime,
				endTime: endTime,
				eventType: '131594', //事件类型
			};
            let data = await this.$http.get('/bi/elevatorMonitor/getThirdHaikEventList', { params });
            if (data && Object.keys(data).length) {
				data.list.forEach(item => {
                    item.source = item.imageUrl;  //大图
                    item.thumbnail = item.imageUrl;  //小图
					item.index = item.id;
					item.captureTime = item.createTime.slice(0,4) + '年' + item.createTime.slice(5,7) + '月' + item.createTime.slice(8,10) + '日' + '' + item.weekStr + item.createTime.slice(10);
				})
				this.sourceImages = data.list;
				this.images = data.list;
				this.totalPhoto = data.total;
				this.loading = false;
				if(data.list.length > 0){
					this.detailShow = true;
				}	
            }else {
				this.sourceImages = [];
				this.images = [];
				this.totalPhoto = data.total;
				this.loading = false;
			}
        },
	}
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .imgList{
	float: left;
	width: calc(24% - 10px);
	margin: 5px;
}
.image {
	width: 100%;
    cursor: pointer;
    display: inline-block;
}
.imageDate{
	display: inline-block;
	width: 100%;
	text-align: center;
	color: #000;
	i {
		font-style: normal;
	}
}
</style>

效果图如下所示：

四、扩展问题

    1.onerror事件
     背景： 在实际开发中，当出现网速较慢的时候，部分图片会因为加载不出来，而出现破损的问题。所以，我们可以使用占位符图片。通过给img添加onerror事件，来解决这个问题。
    定义和用法：onerror事件在加载外部文件（文档或图像）发生错误时触发。

<img :src="thumbnail"
	  onerror="this.src='http://xxxx-smartgo.oss-cn-shanghai.aliyuncs.com/haik/placeholder.png'" 
	  :data-source="source" class="image" :key="index" alt="">

    2. vue相关报错：< template v-for> key should be placed on the < template> tag
    因为示例中，将v-for循环写在了template标签中，导致编辑器出现“< template v-for> key should be placed on the < template> tag”。

     原因 ： v-for是循环指令，它会返回多个值，而这里的template是根节点，根节点，根节点只有一个，根节点不能有多个，所以v-for写在根节点上就有问题。
     解决 ： 在其外面可以包裹一层div，使其不是根节点即可。加div会被渲染出来，如果不想被渲染，也可以加template标签即可。

<div v-viewer="options" class="images clearfix" v-if="detailShow">
	<template v-for="{source, thumbnail ,index,captureTime} in images">
		<template>
			<div class="imgList">
				<img :src="thumbnail"
					onerror="this.src='http://xxxx-smartgo.oss-cn-shanghai.aliyuncs.com/haik/placeholder.png'" 
					:data-source="source" class="image" :key="index" alt="">
						<i class="imageDate">
							<i>{{captureTime}}</i>
						</i>
				</div>
			</template>
		</template>
</div>

    解释： 在一个组件中怎么会有多个template嵌套？第二个template其实相当于自带隐藏属性的容器，这里也可以用div来代替，但div的话就会被渲染成元素。
第二个template可以放执行语句，最终编译后不会被渲染成元素。一般常和v-for和v-show一起结合使用，这样，会使整个html结构没有那么多多余的元素，整个结构会更加清晰。

五、v-viewer相关资料

    ①v-viewer文档资料 https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/
    ②v-viewer实例Demo网站 https://mirari.cc/v-viewer/
    ③v-viewer的github地址 https://github.com/mirari/v-viewer
    ④v-viewer使用指令的示例 https://github.com/mirari/v-viewer/blob/master/example/views/example/DirectiveExample.vue

参考博客： vue viewerjs实现图片预览旋转/放大缩小/上下切换等功能 https://segmentfault.com/a/1190000039952732?utm_source=sf-similar-article
        vue图片点击放大预览 https://www.cnblogs.com/zhengzemin/p/v-viewer_vue-photo-preview.html
        v-viewer 预览图简单使用 https://www.jianshu.com/p/80771b3956fd/
        onerror 事件 https://m.runoob.com/jsref/event-onerror.html
https://www.cnblogs.com/willingtolove/p/9544576.html
        vue中中v-for的使用以及多层嵌套问题 https://www.cnblogs.com/jennydtt/p/10277493.html
        VUE 设置加载默认图片 https://www.jianshu.com/p/72b7350a136f
        图片加载失败优化处理 https://www.cnblogs.com/zhuzhenwei918/p/6891368.html