前言：
之前使用过v-viewer实现图片查看的功能，但是不知道今年怎么回事，node线上的包下载下来不能用了，实现不了效果，又找到了一另一个好用的插件，那就是viewjs。
实现效果：
实现步骤：
1、安装插件
npm install viewerjs
2、案例代码
<template><div id="index" ref='imgView'><ul class="imgUrl"><li v-for="(item,index) of imgArr"><img :src="item" alt="图片描述"></li></ul></div></template><script>import Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';export default {data() {return {imgArr:['/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg','/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg','/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1141259048,554497535&fm=26&gp=0.jpg']}},mounted(){// const ViewerDom = document.getElementById('index');const ViewerDom = this.$refs.imgView;const viewer = new Viewer(ViewerDom, {// 相关配置项,详情见下面});}}</script><style scoped>.imgUrl {display: flex;flex-wrap: wrap;}.imgUrl li{width:148px;height: 148px;list-style: none;border:2px solid #CCC;border-radius: 3px;padding: 1px;margin: 10px;cursor: pointer;}.imgUrl li img{width:100%;height: 100%;}</style>
相关api:
键盘事件
仅在modal mode下可用ESC键: 退出全屏/关闭/退出/停止播放;Space键: 停止/播放;←键: 查看上一张图片;→键: 查看下一张图片;↑键: 放大图片;↓键: 缩小图片;Ctrl + 0组合键: 缩小到初始大小;Ctrl + 1组合键: 放大到原始大小;
配置参数
如果要更改全局默认选项，可以使用view . setdefaults(选项)
toolbar Object详解
key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"
{key:number|Boolean} 显示或者隐藏对应key的按钮 为Number的时候为可见性 {key: String } 自定义按钮的大小 { key: Function } 自定义按钮点击的处理 { key: { show: Boolean | Number, size: String, click: Function } 自定义按钮的每个属性
size的取值范围: small medium default large
