v-viewer
簡介：一款基於 viewer.js 封裝的Vue版插件，可用於圖像查看，以及圖片的旋轉、縮放等功能預覽。
官網：https://mirari.cc/v-viewer/
GitHub 下載地址：https://github.com/mirari/v-viewer
1、插件的安裝
npm安裝
npm install v-viewer --save-dev
2、使用
2.1 Vue 指令形式使用
以指令形式使用，只需要將 v-viewer 指令添加到任意元素即可，該元素下的所有 img元素都會被 viewer 自動處理。
可以傳入 options 配置項：v-viewer="{inline: true}"
可以先用選擇器查找到目標元素，然后用 el.$viewer 來獲取 viewer 實例。
2.1.1 template模板：
<template> <div class="el-col el-col-24 bp_global_wrapper viewer-w"> <div class="el-col el-col-24 flex-layout"> <!--v-viewer的配置參數 配置方式有三種--> <!--1、不配置，指令默認使用該插件內置參數--> <!--<div class="images" v-viewer>--> <!--<img v-for="src in images" :src="src" :key="src" />--> <!--</div>--> <!--2、簡潔配置(參數配置少)，以對象的方式直接賦值給v-viewer指令--> <!--<div class="images" v-viewer="{ inline: false }">--> <!--<img v-for="src in images" :src="src" :key="src" />--> <!--</div>--> <!--3、自定義配置(參數配置多)，在組件屬性 data 內定義參數對象，同時賦值給v-viewer指令--> <div ref="viewer" class="images" v-viewer="viewerOptions"> <img v-for="src in images" :src="src" :key="src" /> </div> <!--指令修飾器--> <!--1、static：添加修飾器后，viewer的創建只會在元素綁定指令時執行一次。如果你確定元素內的圖片不會再發生變化，使用它可以避免不必要的重建動作。--> <!--<div ref="viewer" class="images" v-viewer.static="{ inline: false }">--> <!--<img v-for="src in images" :src="src" :key="src" />--> <!--</div>--> <!--2、rebuild：默認情況下當圖片發生變更時(添加、刪除或排序)，viewer實例會調用update方法更新內容。如果遇到任何顯示問題，也可以嘗試使用重建來代替更新。--> <!--<div ref="viewer" class="images" v-viewer.rebuild="{ inline: false }">--> <!--<img v-for="src in images" :src="src" :key="src" />--> <!--</div>--> </div> <div class="el-col el-col-24 btn-w text-align-c"> <el-button type="primary" @click.stop="showViewer">圖片預覽</el-button> </div> </div> </template>
2.1.2 配套樣式：
<style scoped lang="less"> .viewer-w { padding: 25px; background: #ffffff; } .images { img:not(:last-child) { margin-right: 15px; } } .btn-w { margin-top: 20px; } </style>
2.1.3 指令引入、指令注冊、自定義指令配置參數及功能函數：
<script> import 'viewerjs/dist/viewer.css' // 不管插件以哪種方式引入和使用，css文件都是必須引入的 // 指令引入有兩種方式 // 1、以常量(directive即是該插件內導出的一個常量)字面量方式進行引入(同時在導入該常量時取別名為viewer，便於閱讀和識別)，但需要在當前組件內進行指令的注冊 import { directive as viewer } from 'v-viewer' export default { name: 'directiveForm', // 組件內注冊指令(局部指令)，將上面 1 中的引入的指令，在組件內進行注冊。注冊完成后，使用方法和Vue內置指令v-show等一樣 directives: { viewer: viewer({ debug: true }) }, data() { // 自定義指令配置參數。更多配置參照viewer.js[https://github.com/fengyuanchen/viewerjs] this.viewerOptions = { backdrop: true, // 是否啟用播放模態背景[布爾值/字符串：默認true](不啟用時，點擊空白處不會退出播放，僅點擊右上角關閉按鈕才會退出播放) inline: false, // 啟用inline模式[布爾值：默認false] button: true, // 顯示右上角關閉按鈕[布爾值：默認true] navbar: false, // 顯示縮略圖導航[布爾值/數字：默認true] title: false, // 顯示當前圖片的標題(顯示alt屬性或從URL解析出的圖片名稱)[布爾值/數字/方法/數組：默認true] toolbar: false, // 顯示工具欄、自定義工具欄[布爾值/數字/對象：默認true] tooltip: true, // 顯示縮放百分比[布爾值：默認true] movable: true, // 圖片是否可移動[布爾值：默認true] zoomable: true, // 圖片是否可縮放[布爾值：默認true] rotatable: true, // 圖片是否可旋轉[布爾值：默認true] scalable: true, // 圖片是否可翻轉[布爾值：默認true] transition: true, // 使用CSS3過渡[布爾值：默認true] fullscreen: true, // 播放時是否全屏[布爾值/全屏配置：默認true] keyboard: true, // 是否支持鍵盤[布爾值：默認true] url: 'src' // 播放時圖片地址 URL 來源。[字符串/方法：默認src](如果是字符串，則應該是每個圖像元素的屬性之一。 如果是方法，則應該返回一個有效的圖像URL) } return { images: ['https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200'] } }, methods: { /** * 點擊圖片預覽按鈕，進行圖片預覽播放 */ showViewer() { // 顯示播放兩種方式 // 1、直接樣式匹配到指定選擇器的第一個元素，然后通過$viewer屬性獲取對應的元素信息對象，從而調用方法顯示 // const viewer = this.$el.querySelector('.images').$viewer // viewer.show() // 2、通過ref獲取到對應節點，再通過$viewer屬性獲取對應的元素信息對象，繼而調用方法顯示 this.$refs.viewer.$viewer.show() } } } </script>
2.1.4 指令修飾器：
static：添加修飾器后，viewer的創建只會在元素綁定指令時執行一次。如果你確定元素內的圖片不會再發生變化，使用它可以避免不必要的重建動作。
<div class="images" v-viewer.static="{inline: true}"> <img v-for="src in images" :src="src" :key="src"> </div>
rebuild：默認情況下當圖片發生變更時(添加、刪除或排序)，viewer實例會使用update方法更新內容。如果你遇到任何顯示問題，嘗試使用重建來代替更新。
<div class="images" v-viewer.rebuild="{inline: true}"> <img v-for="src in images" :src="src" :key="src"> </div>
2.2 Vue 組件形式使用
你也可以單獨引入全屏組件並局部注冊它。
使用 作用域插槽 來定制你的圖片展示方式。
監聽 inited 事件來獲取 viewer 實例，或者也可以用 this.refs.xxx.$viewer 這種方法。
2.2.1 template模板：
<template> <div class="el-col el-col-24 bp_global_wrapper viewer-w"> <div class="el-col el-col-24 flex-layout"> <!--viewer組件的配置參數 配置方式有三種--> <!--1、不配置，組件默認使用該插件內置參數--> <!--<viewer class="images" ref="viewer" :images="images" @inited="inited">--> <!--<!–<template #default="scope">–>--> <!--<!–<img v-for="src in scope.images" :src="src" :key="src" />–>--> <!--<!–</template>–>--> <!--<img v-for="src in images" :src="src" :key="src" />--> <!--</viewer>--> <!--2、簡潔配置(參數配置少)，以對象的方式直接賦值給option屬性--> <!--<viewer class="images" ref="viewer" :options="{ movable: false }" :images="images" @inited="inited">--> <!--<!–<template #default="scope">–>--> <!--<!–<img v-for="src in scope.images" :src="src" :key="src" />–>--> <!--<!–</template>–>--> <!--<img v-for="src in images" :src="src" :key="src" />--> <!--</viewer>--> <!--3、自定義配置(參數配置多)，在組件屬性 data 內定義參數對象，同時賦值給option屬性--> <viewer class="images" ref="viewer" :options="viewerOptions" :images="images" @inited="inited"> <!--組件內的節點掛載也分兩種，上同--> <!--1、通過template模板插槽的方式進行節點掛載--> <!--<template #default="scope">--> <!--<img v-for="src in scope.images" :src="src" :key="src" />--> <!--</template>--> <!--2、也不需要啥template模板了，直接寫標簽，進行相應節點加載和渲染--> <img v-for="src in images" :src="src" :key="src" /> </viewer> <!--組件屬性--> <!--1、images：【類型：Array】Viewer組件 圖片放大播放時，數據來源--> <!--2、options：【類型：Object】Viewer組件創建實例時所需的配置參數--> <!--3、trigger：【類型：Array】你可以使用trigger來代替images，從而可以傳入任何類型的數據。當trigger綁定的數據發生變化時，組件就會自動更新並重新渲染。--> <!--<viewer :trigger="externallyGeneratedHtmlWithImages">--> <!--<div v-html="externallyGeneratedHtmlWithImages"/>--> <!--</viewer>--> <!--4、rebuild：【類型：Boolean，默認值：false】默認情況下當圖片發生變更時(添加、刪除或排序)，viewer實例會調用update方法更新內容。如果遇到任何顯示問題，也可以嘗試使用重建來代替更新。--> <!--<viewer class="viewer" ref="viewer" :options="viewerOptions" :images="images" rebuild @inited="inited">--> <!--<template #default="scope">--> <!--<img v-for="src in scope.images" :src="src" :key="src" />--> <!--{{ scope.options }}--> <!--</template>--> <!--</viewer>--> <!--組件事件--> <!--inited：組件加載完成后監聽inited事件來獲取viewer實例，或者用this.refs.xxx.$viewer獲取viewer實例。--> </div> <div class="el-col el-col-24 btn-w text-align-c"> <el-button type="primary" @click.stop="showViewer">圖片預覽</el-button> </div> </div> </template>
2.2.2 配套樣式：
<style scoped lang="less"> .viewer-w { padding: 25px; background: #ffffff; } .images { img:not(:last-child) { margin-right: 15px; } } .btn-w { margin-top: 20px; } </style>
2.2.3 組件引入、組件注冊、自定義組件配置參數及功能函數：
<script> import 'viewerjs/dist/viewer.css' // 不管插件以哪種方式引入和使用，css文件都是必須引入的 // 以常量(component即是該插件內導出的一個常量)字面量方式進行組件引入(同時在導入該常量時取別名為viewer，便於閱讀和識別)，但需要在當前組件內進行引入組件的注冊 import { component as viewer } from 'v-viewer' export default { name: 'componentForm', // 注冊組件(注冊為局部組件)，將上面引入的組件，在當前組件內進行注冊。 components: { viewer }, data() { // viewer組件配置參數。更多配置參照viewer.js[https://github.com/fengyuanchen/viewerjs] this.viewerOptions = { backdrop: true, // 是否啟用播放模態背景[布爾值/字符串：默認true](不啟用時，點擊空白處不會退出播放，僅點擊右上角關閉按鈕才會退出播放) inline: false, // 啟用inline模式[布爾值：默認false] button: true, // 顯示右上角關閉按鈕[布爾值：默認true] navbar: false, // 顯示縮略圖導航[布爾值/數字：默認true] title: false, // 顯示當前圖片的標題(顯示alt屬性或從URL解析出的圖片名稱)[布爾值/數字/方法/數組：默認true] toolbar: false, // 顯示工具欄、自定義工具欄[布爾值/數字/對象：默認true] tooltip: true, // 顯示縮放百分比[布爾值：默認true] movable: true, // 圖片是否可移動[布爾值：默認true] zoomable: true, // 圖片是否可縮放[布爾值：默認true] rotatable: true, // 圖片是否可旋轉[布爾值：默認true] scalable: true, // 圖片是否可翻轉[布爾值：默認true] transition: true, // 使用CSS3過渡[布爾值：默認true] fullscreen: true, // 播放時是否全屏[布爾值/全屏配置：默認true] keyboard: true, // 是否支持鍵盤[布爾值：默認true] url: 'src' // 播放時圖片地址 URL 來源。[字符串/方法：默認src](如果是字符串，則應該是每個圖像元素的屬性之一。 如果是方法，則應該返回一個有效的圖像URL) } return { images: ['https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200'], $viewer: null // viewer組件實例對象 } }, methods: { /** * 組件初始化完成，獲取組件實例對象 */ inited(viewer) { this.$viewer = viewer }, /** * 點擊圖片預覽按鈕，進行圖片預覽播放 */ showViewer() { // 顯示播放兩種方式 // 1、直接樣式匹配到指定選擇器的第一個元素，然后通過$viewer屬性獲取對應的元素信息對象，從而調用方法顯示 // const viewer = this.$el.querySelector('.images').$viewer // viewer.show() // 2、通過ref獲取到對應節點，再通過$viewer屬性獲取對應的元素信息對象，繼而調用方法顯示 this.$refs.viewer.$viewer.show() } } } </script>
2.2.4 組件屬性：
images：【類型:：Array】Viewer組件 圖片放大播放時，數據來源
options：【類型：Object】Viewer組件創建實例時所需的配置參數
trigger：【類型：Array】你可以使用trigger來代替images，從而可以傳入任何類型的數據。當trigger綁定的數據發生變化時，組件就會自動更新並重新渲染。
<viewer :trigger="externallyGeneratedHtmlWithImages"> <div v-html="externallyGeneratedHtmlWithImages"/> </viewer>
rebuild：【類型：Boolean，默認值：false】默認情況下當圖片發生變更時(添加、刪除或排序)，viewer實例會調用update方法更新內容。如果遇到任何顯示問題，也可以嘗試使用重建來代替更新。
<viewer class="viewer" ref="viewer" :options="viewerOptions" :images="images" rebuild @inited="inited"> <template #default="scope"> <img v-for="src in scope.images" :src="src" :key="src" /> {{ scope.options }} </template> </viewer>
2.2.5 組件事件：
inited：組件加載完成后監聽inited事件來獲取viewer實例，或者用this.refs.xxx.$viewer獲取viewer實例。
methods: { /** * 組件初始化完成，獲取組件實例對象 */ inited(viewer) { this.$viewer = viewer }, /** * 點擊圖片預覽按鈕，進行圖片預覽播放 */ showViewer() { // 顯示播放兩種方式 // 1、直接樣式匹配到指定選擇器的第一個元素，然后通過$viewer屬性獲取對應的元素信息對象，從而調用方法顯示 // const viewer = this.$el.querySelector('.images').$viewer // viewer.show() // 2、通過ref獲取到對應節點，再通過$viewer屬性獲取對應的元素信息對象，繼而調用方法顯示 this.$refs.viewer.$viewer.show() } }
2.3 全量引入插件
上面分別從指令和組件兩種方式介紹了v-viewer插件的使用，在使用過程中，首先通過指令、組件字面量進行指令、組件的引入，然后在當前組件內對指令和組件進行注冊，不注冊則不能使用。
這種方式有2個好處：1、按需引入，避免了其他非必要資源的引入，造成資源浪費；2、資源引入明確，是指令就是指令，是組件就是組件，互不干擾，便於后期項目的維護和管理。
但這種方式也有不好的地方，使用繁瑣，指令和組件既要引入，還要注冊，尤其是多地多次使用時，每次都需要獨立引入和注冊，顯得很麻煩。所以我們可以采用另一種使用方式，全量引入，全局注冊
2.3.1 在main.js文件內對插件全量引入、全量注冊：
import Vue from 'vue' import 'viewerjs/dist/viewer.css' // 不管插件以哪種方式引入和使用，css文件都是必須引入的 import Viewer from 'v-viewer' // 全量引入插件 Vue.use(Viewer) // 將插件注冊成全局插件(包含指令和組件，都一並注冊了) // 如果需要避開重名，則可以給插件另取一個別名，以示區分，如以下： // Vue.use(Viewer, { name: 'VueViewer' }) // 如果在具體使用時，用戶不需要或者不想自定義配置參數，但又需要修改其中一兩個配置參數以作定制全局功能時， // 則可以在注冊插件時傳入默認參數 defaultOptions【類型: Object，默認值: undefined】，以覆蓋viewer.js默認的全局配置參數 // Vue.use(Viewer, { // defaultOptions: { // zIndex: 9999 // } // })
2.3.2 指令、組件使用template模板：
<template> <div class="el-col el-col-24 bp_global_wrapper viewer-w"> <!--1、指令形式使用--> <div class="images flex-layout" ref="viewerDirective" v-viewer="viewerOptions"> <img v-for="src in images" :src="src" :key="src" /> </div> <!--2、組件形式使用--> <viewer class="images flex-layout component-usage" ref="viewerComponent" :options="viewerOptions" :images="images" @inited="inited" > <img v-for="src in images" :src="src" :key="src" /> </viewer> <div class="el-col el-col-24 btn-w text-align-c"> <el-button type="primary" @click.stop="showViewer_directive">指令圖片預覽</el-button> <el-button type="primary" @click.stop="showViewer_component">組件圖片預覽</el-button> </div> </div> </template>
2.3.2 配套樣式：
<style scoped lang="less"> .viewer-w { padding: 25px; background: #ffffff; } .images { img:not(:last-child) { margin-right: 15px; } } .component-usage, .btn-w { margin-top: 20px; } </style>
2.3.3 自定義指令、組件配置參數及功能函數：
<script> // 注：在mian.js里面已經全量引入和全量注冊了，這里就不需要再引入(包括樣式)和注冊了 // import 'viewerjs/dist/viewer.css' // 不管插件以哪種方式引入和使用，css文件都是必須引入的 // import Vue from 'vue' // import Viewer from 'v-viewer' // 全量引入插件 // Vue.use(Viewer) // 將插件注冊成全局插件(包含指令和組件，都一並注冊了) export default { name: 'fullImport', // 全量引入 data() { // 指令、組件配置參數。更多配置參照viewer.js[https://github.com/fengyuanchen/viewerjs] this.viewerOptions = { backdrop: true, // 是否啟用播放模態背景[布爾值/字符串：默認true](不啟用時，點擊空白處不會退出播放，僅點擊右上角關閉按鈕才會退出播放) inline: false, // 啟用inline模式[布爾值：默認false] button: true, // 顯示右上角關閉按鈕[布爾值：默認true] navbar: false, // 顯示縮略圖導航[布爾值/數字：默認true] title: false, // 顯示當前圖片的標題(顯示alt屬性或從URL解析出的圖片名稱)[布爾值/數字/方法/數組：默認true] toolbar: false, // 顯示工具欄、自定義工具欄[布爾值/數字/對象：默認true] tooltip: true, // 顯示縮放百分比[布爾值：默認true] movable: true, // 圖片是否可移動[布爾值：默認true] zoomable: true, // 圖片是否可縮放[布爾值：默認true] rotatable: true, // 圖片是否可旋轉[布爾值：默認true] scalable: true, // 圖片是否可翻轉[布爾值：默認true] transition: true, // 使用CSS3過渡[布爾值：默認true] fullscreen: true, // 播放時是否全屏[布爾值/全屏配置：默認true] keyboard: true, // 是否支持鍵盤[布爾值：默認true] url: 'src' // 播放時圖片地址 URL 來源。[字符串/方法：默認src](如果是字符串，則應該是每個圖像元素的屬性之一。 如果是方法，則應該返回一個有效的圖像URL) } return { images: ['https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200'], $viewer: null // viewer組件實例對象 } }, methods: { /** * 組件初始化完成，獲取組件實例對象 */ inited(viewer) { this.$viewer = viewer }, /** * 點擊圖片預覽按鈕，進行圖片預覽播放(指令方式) */ showViewer_directive() { this.$refs.viewerDirective.$viewer.show() }, /** * 點擊圖片預覽按鈕，進行圖片預覽播放(組件方式) */ showViewer_component() { this.$refs.viewerComponent.$viewer.show() } } } </script>
3、總結
v-viewer是一款非常優秀的圖片預覽播放插件，內置了很多功能，比如圖片的旋轉、縮放、翻轉以及圖片的拖動等操作，可以通過不同的自定義配置，進行不同的功能搭配。
同時依據需要，插件提供了各種不同的加載使用方式：1、指令使用，2、組件使用、3、全局使用、4、甚至提供了api使用方式，可以調用api直接進行viewer實例的創建。
這種種使用方式，在很大程度上保證了插件的靈活加載和靈活使用，避免了無必要資源的浪費引入，以及使用上的僵化導致的各種不適用或不舒適。
最后，非常感謝這些封裝插件的大佬，正是這些輪子的問世，使得前端開發減少了不知多少工作量，也讓這些功能看起來更高大上更美觀了。