Vue圖片瀏覽組件v-viewer，支持旋轉、縮放、翻轉等操作

• 之前用過viewer.js，算是市場上用過最全面的圖片預覽。
• v-viewer，是基于viewer.js的一個圖片瀏覽的Vue組件，支持旋轉、縮放、翻轉等操作。

基本使用

安裝：npm安裝

npm install v-viewer

目錄結構如下

注冊并使用

引入v-viewer及必需的css樣式，并使用Vue.use()注冊插件，之后即可使用。

• import 'viewerjs/dist/viewer.css'：引入必需的css樣式，詳見上目錄。
• import VueViewer from 'v-viewer'：引入v-viewer
• Vue.use(VueViewer) ：使用Vue.use()注冊插件

<template><div><viewer :images="images"><!-- style="width: 100px; height: 100px" 這是指定縮略圖大小--><img v-for="(src,index) in images" :key="index" :src="src" style="width: 100px; height: 100px" @click="show(index)"></viewer><!-- api --><button type="button" @click="show">Click to show</button></div>
</template>
<script>import 'viewerjs/dist/viewer.css'import VueViewer from 'v-viewer'import Vue from 'vue'Vue.use(VueViewer)export default {data() {return {images: ["https://picsum.photos/200/200","https://picsum.photos/300/200","https://picsum.photos/250/200"]};},methods: {show(index) {this.$viewerApi({images: this.images,options: {initialViewIndex: index,},})},},}
</script>

預覽時，如何打開指定圖片

主要取決于this.$viewerApi所傳參數對象：ViewerApiOptions

this.$viewerApi({images: this.images,options: {initialViewIndex: index,},
})

ViewerApiOptions分析

export interface ViewerApiOptions {images: Array<string | object>options?: ViewerJs.Options}

• images：圖片列表（必填）
• options：參考ViewerJs.Options的參數👇（非必填，如果包含，它的類型必須是 ViewerJs.Options）

ViewerJs.Options分析

export interface Options {backdrop?: boolean | string; // 是否顯示遮罩層，以及遮罩層的顏色或圖片button?: boolean; // 是否顯示右上角的關閉按鈕className?: string; // 給查看器容器添加自定義類名container?: string | HTMLElement; // 查看器的容器，可以是選擇器字符串或HTMLElement對象filter?: Function; // 圖片過濾函數，用于篩選需要顯示的圖片fullscreen?: boolean | FullscreenOptions; // 是否啟用全屏模式及全屏選項focus?: boolean; // 是否在查看時將焦點鎖定在查看器上hidden?(event: CustomEvent): void; // 查看器隱藏后的回調函數hide?(event: CustomEvent): void; // 查看器開始隱藏時的回調函數inheritedAttributes?: string[]; // 定義哪些圖片屬性應被查看器繼承initialCoverage?: number; // 圖片初始覆蓋率，決定圖片初始顯示的大小initialViewIndex?: number; // 初始查看圖片的索引inline?: boolean; // 是否以內聯方式（而不是模態方式）顯示查看器interval?: number; // 幻燈片播放時每張圖片的停留時間keyboard?: boolean; // 是否允許鍵盤控制loading?: boolean; // 是否顯示加載提示loop?: boolean; // 在最后一張圖片后是否循環到第一張圖片maxZoomRatio?: number; // 允許的最大縮放比例minHeight?: number; // 圖片的最小高度minWidth?: number; // 圖片的最小寬度minZoomRatio?: number; // 允許的最小縮放比例movable?: boolean; // 圖片是否可拖動move?(event: MoveEvent): void; // 圖片移動時的回調函數moved?(event: MovedEvent): void; // 圖片移動結束時的回調函數navbar?: boolean | Visibility; // 是否顯示導航欄play?(event: CustomEvent): void; // 點擊播放按鈕時的回調函數ready?(event: CustomEvent): void; // 查看器準備就緒時的回調函數rotatable?: boolean; // 圖片是否可旋轉rotate?(event: RotateEvent): void; // 圖片旋轉時的回調函數rotated?(event: RotatedEvent): void; // 圖片旋轉結束時的回調函數scalable?: boolean; // 圖片是否可縮放scale?(event: ScaleEvent): void; // 圖片縮放時的回調函數scaled?(event: ScaledEvent): void; // 圖片縮放結束時的回調函數show?(event: CustomEvent): void; // 查看器開始顯示時的回調函數shown?(event: CustomEvent): void; // 查看器顯示后的回調函數slideOnTouch?: boolean; // 是否允許觸摸滑動切換圖片stop?(event: CustomEvent): void; // 停止播放時的回調函數title?: boolean | Visibility | Function | [Visibility, Function]; // 圖片標題的顯示方式和內容toggleOnDblclick?: boolean; // 是否允許雙擊切換圖片的縮放狀態toolbar?: boolean | Visibility | ToolbarOptions; // 工具欄的顯示方式和選項tooltip?: boolean; // 是否顯示工具提示transition?: boolean; // 是否使用 CSS 過渡效果url?: string | Function; // 定義如何從圖片元素獲取大圖的 URLview?(event: CustomEvent): void; // 開始查看某張圖片時的回調函數viewed?(event: CustomEvent): void; // 查看某張圖片結束時的回調函數zIndex?: number; // 查看器的 z-index 值zIndexInline?: number; // 內聯查看器的 z-index 值zoom?(event: ZoomEvent): void; // 圖片縮放時的回調函數zoomOnTouch?: boolean; // 是否允許觸摸縮放圖片zoomOnWheel?: boolean; // 是否允許鼠標滾輪縮放圖片zoomRatio?: number; // 縮放比例的步進值zoomable?: boolean; // 圖片是否可縮放zoomed?(event: ZoomedEvent): void; // 圖片縮放結束時的回調函數
}

字段較多，并未一一進行嘗試實踐，可自行學習，這里initialViewIndex決定初始索引。

• initialViewIndex：初始查看圖片的索引