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