VUE3的學習和使用（四）用viewerjs插件實現圖片預覽

用viewerjs插件實現圖片預覽

// 安裝依賴
"viewerjs": "^1.9.0"

在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>

預覽函數

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();
  }
};