插件安装

npm install viewerjs

插件引入

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

html部分

<img id="viewerDom" src = "xxx.png" alt="">
或者
<ul id="viewerDom">
  <li v-for="item in imgList" :key="index">
    <img src = "item">
  </li>
</ul>
或者
<div id = "viewerDom">
  <img v-for="item in imgList" :src="item">
</div>

调用插件

//具体需要哪些配置可参照下表
const ViewerDom = document.querySelector('#viewerDom');
   this.viewer = new Viewer(ViewerDom, {
     initialViewIndex: 0,
     button: true, //右上角关闭按钮
     navbar: 2,
     title: 0,
     toolbar: 0,
     keyboard: false,
     ready: function (e) {
      console.log(e.type);
     },
     show: function (e) {
      console.log(e.type);
     },
     shown: function (e) {
      console.log(e.type);
     },
     hide: function (e) {
      console.log(e.type);
     },
     hidden: function (e) {
      console.log(e.type);
     },
     view: function (e) {
      console.log(e.type);
     },
     viewed: function (e) {
      console.log(e.type);
     },
     zoom: function (e) {
      console.log(e.type);
     },
     zoomed: function (e) {
      console.log(e.type);
     }
  });

键盘事件

仅在modal mode下可用
ESC 键: 退出全屏/关闭/退出/停止播放;
Space 键: 停止/播放;
←键: 查看上一张图片;
→键: 查看下一张图片;
↑键: 放大图片;
↓键: 缩小图片;
Ctrl + 0 组合键: 缩小到初始大小;
Ctrl + 1 组合键: 放大到原始大小;

配置参数

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;

方法

event

let viewer;

image.addEventListener('viewed', function () {
  console.log(this.viewer === viewer);
  // > true
});

viewer = new Viewer(image);

ready、show、shown、hide、hidden、view、viewed、zoom、zoomed

插件官方git地址

插件demo地址