关于zx-image-view图片预览插件，支持旋转、缩放、移动的相关操作

npm install zx-image-view --save-dev# 或npm i zx-image-view -D

import { ZxImageView } from 'zx-image-view'

<p id="imgList">
 <img data-index="0" src="a.jpg">
 <img data-index="1" src="b.jpg">
 <img data-index="2" src="c.jpg">
 <img data-index="3" src="d.jpg"></p><script src="dist/js/zx-image-view.min.js"></script><script>
 // 初始化参数
 var options = { // 见参数说明处
 }; // 图片数组1
 var imgArray1 = [ 'http://xxx.com/a.jpg', 'http://xxx.com/b.jpg', 'http://xxx.com/c.jpg', 'http://xxx.com/d.jpg'
 ]; // 图片数组2
 var imgArray2 = [
 {
 url: 'http://xxx.com/a.jpg', // 初始化旋转角度
 angle: 90
 },
 {
 url: 'http://xxx.com/b.jpg',
 angle: 0
 },
 {
 url: 'http://xxx.com/c.jpg',
 angle: 180
 },
 {
 url: 'http://xxx.com/d.jpg'
 angle: 90
 }
 ];</script>

var ziv1 = new ZxImageView(options, imgArray1);// 点击缩略图，查看大图var $el = document.getElementById('imgList');
$el.addEventListener('click', function (e) {
 if (this.nodeName === 'IMG') { // 获取图片索引
 var index = this.getAttribute('data-index'); // 查看图片
 ziv1.view(index);
 }
})

var ziv2 = new ZxImageView(imgArray2);

var ziv3 = new ZxImageView();
ziv3.init(imgArray2);

var ziv4 = new ZxImageView();// 业务场景，针对后台管理列表页，每条数据(动态)有多张图片，需预览，不需要多次实例化ZxImageView// 查看imgArray2第3张图片ziv4.view(2, imgArray2);

npm run start# http://localhost:9000/

 // 初始化参数let _config = { // 分页mouseover切换图片
 paginationable: true, // 显示关闭按钮
 showClose: true, // 显示上一张/下一张箭头
 showSwitchArrow: true, // 显示分页导航栏
 showPagination: true, // 缩放
 scalable: true, // 旋转
 rotatable: true, // 移动
 movable: true, // 键盘配置
 keyboard: {
 prev: 'a',
 next: 'd',
 rotate: ['up', 'down'],
 scale: 'mousewheel'
 }
}new ZxImageView(_config);