Concernant le plug-in d'aperçu d'image zx-image-view, il prend en charge les opérations liées à la rotation, à la mise à l'échelle et au déplacement.

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" alt="Concernant le plug-in d'aperçu d'image zx-image-view, il prend en charge les opérations liées à la rotation, à la mise à l'échelle et au déplacement." >
  <img  data-index="1" src="b.jpg" alt="Concernant le plug-in d'aperçu d'image zx-image-view, il prend en charge les opérations liées à la rotation, à la mise à l'échelle et au déplacement." >
  <img  data-index="2" src="c.jpg" alt="Concernant le plug-in d'aperçu d'image zx-image-view, il prend en charge les opérations liées à la rotation, à la mise à l'échelle et au déplacement." >
  <img  data-index="3" src="d.jpg" alt="Concernant le plug-in d'aperçu d'image zx-image-view, il prend en charge les opérations liées à la rotation, à la mise à l'échelle et au déplacement." ></p><script src="dist/js/zx-image-view.min.js"></script><script>
  // 初始化参数
  var options = {    // 见参数说明处
  };  // 图片数组1
  var imgArray1 = [    &#39;http://xxx.com/a.jpg&#39;,    &#39;http://xxx.com/b.jpg&#39;,    &#39;http://xxx.com/c.jpg&#39;,    &#39;http://xxx.com/d.jpg&#39;
  ];  // 图片数组2
  var imgArray2 = [
    {
      url: &#39;http://xxx.com/a.jpg&#39;,      // 初始化旋转角度
      angle: 90
    },
    {
      url: &#39;http://xxx.com/b.jpg&#39;,
      angle: 0
    },
    {
      url: &#39;http://xxx.com/c.jpg&#39;,
      angle: 180
    },
    {
      url: &#39;http://xxx.com/d.jpg&#39;
      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);