viewerjs在vue中实现点击图片预览、切换、缩放、拖拽、旋转等功能

 1、下载依赖：

npm i viewerjs

2、定义html结构

<template>
<div>
  <ul class="artBody">
    <li><img src="picture-1.jpg" alt="Picture 1">li>
    <li><img src="picture-2.jpg" alt="Picture 2">li>
    <li><img src="picture-3.jpg" alt="Picture 3">li>
  ul>
div>
template>

3、入viewerjs插件并创建实例

• js中在页面挂载完成后开始创建一个Viewer示例，第一个参数是图片所在的区域，第二个参数为Viewer内置的一些工具栏配置

•  工具栏选项可在官网查看：viewerjs - npm