vue+viewerjs插件 实现图片预览

👍用viewerjs插件实现图片预览

首先

// 安装依赖
"viewerjs": "^1.9.0"

1.在template里展示图片并设置点击事件

<template>
  <ul id="img-area">
   <li v-for="(item,index) in imgList" :key="item.id">
       <button @click="previewImage(index)">
          <img :src="xxx" alt=""/>
       </button>
    </li>
  </ul>
</template>

2.引入插件以及样式(不引入css会报错）

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

3.实现预览函数

const previewImage = (index) => {
  const box = document.querySelector('#img-area');
  if (box) {
    const photoViewer = new Viewer(box, {
      inline: false, // 是否启用 inline 模式
      fullscreen: true, // 播放时是否全屏
      title: false, // 是否显示当前图片的标题
      toolbar: {  // 显示工具栏
       // 下面各种按钮1显示，0隐藏，可自定义按钮大小和点击事件
        zoomIn: 1, // 放大图片
        zoomOut: 1, //缩小图片
        oneToOne: 1, // 图片比例100%
        reset: 1, // 重置图片大小
        prev: 1, // 查看上一张图片
        play: 0, // 播放图片
        next: 1,// 查看下一张图片
        rotateLeft: 1,// 向左旋转图片
        rotateRight: 1,// 向右旋转图片
        flipHorizontal: 1,// 图片左右翻转
        flipVertical: 1, // 图片上下翻转
      },
      // 定义用于查看的图像的初始索引
      initialViewIndex: index, 
      // 每次关闭查看时触发 
      hide () {
        photoViewer.destroy();
      },
      // 每次关闭查看时触发，在hide之后 
      hidden () {
        photoViewer.destroy();
      },
      // 每次查看时触发
      show () {
        photoViewer.full();
      },
    });
    photoViewer.show();
  }
};

实现效果