vue2中使用viewer.js的实现示例

npm install v-viewer@1.7.4

import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";

Vue.use(Viewer);

<template>
  <div class="pics-view" v-viewer="viewerOptions">
    <div
      class="pics-item"
      v-for="item in picsList"
      :key="item.title + item.url"
    >
      <h4 class="title" :title="item.title">{{ item.title }}</h4>
      <img :src="item.url" :alt="item.title" class="preview-img" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
  	// 图片列表（title、url）
    picsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 配置viewer.js的参数
      viewerOptions: {
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
          zoomIn: true,
          zoomOut: true,
          rotateLeft: true,
          rotateRight: true,
          flipHorizontal: true,
          flipVertical: true,
          reset: true,
        },
        button: function () {
          const container = document.createElement("div");
          container.className = "viewer-toolbar-custom";

          // 上一张按钮
          const prevBtn = document.createElement("button");
          prevBtn.type = "button";
          prevBtn.className = "viewer-button viewer-prev";
          prevBtn.innerHTML = '<i class="el-icon-arrow-left"></i>';
          prevBtn.title = "上一张";
          container.appendChild(prevBtn);

          // 下一张按钮
          const nextBtn = document.createElement("button");
          nextBtn.type = "button";
          nextBtn.className = "viewer-button viewer-next";
          nextBtn.innerHTML = '<i class="el-icon-arrow-right"></i>';
          nextBtn.title = "下一张";
          container.appendChild(nextBtn);

          return container;
        },
        initialized: function (viewer) {
          // 绑定上一张事件
          const prevBtn = viewer.element.querySelector(".viewer-prev");
          prevBtn.addEventListener("click", () => viewer.prev());

          // 绑定下一张事件
          const nextBtn = viewer.element.querySelector(".viewer-next");
          nextBtn.addEventListener("click", () => viewer.next());
        },
      },
    };
  },
};
</script>

<style scoped lang="scss">
.pics-view {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .pics-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;

    .title {
      width: 100%;
      padding: 4px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .preview-img {
      width: 100%;
      height: 100px;
      object-fit: contain;
      cursor: pointer;
      border: 1px solid #eee;
      border-radius: 4px;
      transition: all 0.3s;
      border: 1px solid #ccc;

      &:hover {
        border-color: #409eff;
      }
    }
  }
}
</style>