快捷導(dǎo)航

vue2中使用viewer.js的實(shí)現(xiàn)示例

更新時(shí)間：2025年10月01日 09:21:50 作者：王闊闊

本文主要介紹了vue2中使用viewer.js的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

先展示下實(shí)現(xiàn)效果

簡(jiǎn)單的圖片放大縮小、切換上一張下一張、左右旋轉(zhuǎn)可使用ElementUi中的el-image組件，但像上下左右鏡像翻轉(zhuǎn)el-image組件就無法滿足，因此我這里使用到了viewer.js。

1. 安裝插件

npm install v-viewer@1.7.4

2. main.js

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

Vue.use(Viewer);

3. 圖片查看器組件

<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的參數(shù)
      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>

到此這篇關(guān)于vue2中使用viewer.js的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue2使用viewer.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: