Vue 中使用 viewerjs

安裝 viewerjs

npm install viewerjs --save

創建一個 Viewer.vue 組件

<template>
    <div id="index">
        <ul>
            <li v-for="(item, index) in imgArr"
                :key="index">
                <img :src="item" />
            </li>
        </ul>
        <p>測試測試測試</p>
        <p>測試測試測試</p>
        <p>測試測試測試</p>
        <p>測試測試測試</p>
        <img :src="imgArr[2]" />
    </div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
    name: 'Viewer',
    data() {
        return {
            imgArr: [
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538988692454&di=a6086c2c80a99ec0a50ed3696776f39e&imgtype=0&src=http%3A%2F%2Fpic165.nipic.com%2Ffile%2F20180522%2F12398452_105538125000_2.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539582468&di=78699558c94fff160ae1fa5cc73be9fa&imgtype=jpg&er=1&src=http%3A%2F%2Fpic166.nipic.com%2Ffile%2F20180522%2F12398452_105521854000_2.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538987750399&di=8c77894bad73fbc3c1c82ebde9309ff2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D09e9a51105f41bd5ce5ee0b438a2e4a7%2Ffaedab64034f78f083c1d8c972310a55b2191cc5.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538987750397&di=70b58f375170a335264545cdea00aec9&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D79013c1e743e6709aa0d4dbf52bffa51%2Fb7fd5266d0160924759f6222df0735fae6cd3455.jpg',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538987750397&di=106be7a370b48812e9e7ed19e9c8eb16&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D896dc4cbde62853586edda61f99713aa%2Fd009b3de9c82d158de82e7888b0a19d8bc3e4282.jpg'
            ]
        };
    },
    mounted() {
        const ViewerDom = document.getElementById('index');
        const viewer = new Viewer(ViewerDom, {
            // 配置
        })
    },
}
</script>
<style lang="less">
#index {
    width: 100%;
    ul {
        li {
            width: 24%;
            height: 200px;
            margin-right: 1%;
            margin-bottom: 20px;
            cursor: pointer;
            display: inline-block;
            &:nth-child(4n) {
                margin-right: 0;
            }
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>

支持的鍵盤事件

僅在modal mode 下可用

• ESC 鍵：退出全屏、關閉、退出、停止播放
• Space 鍵：停止、播放
• ← 鍵：查看上一張圖片
• → 鍵：查看下一張圖片
• ↑ 鍵：放大圖片
• ↓ 鍵：縮小圖片
• Ctrl + 0 組合鍵：縮小到初始大小
• Ctrl + 1 組合鍵：放大到原始大小

參數配置

如果要改變全局的默認樣式，可以使用 Viewer.setDefaults(options)

 

參數名稱	參數類型	默認值	說明
initialViewIndex	Number	0	定義用於查看的圖像的初始索引
inline	Boolean	false	支持 inline mode
button	Boolean	true	是否顯示查看圖片時右上角的關閉按鈕
navbar	Boolean / Number	true	是否顯示底部導航欄  0 或者 false :不顯示  1 或者 true :顯示  2 :當屏幕寬度大於768px時顯示  3 :當屏幕寬度大於992px時顯示  4 :當屏幕寬度大於1200px時顯示
title	Boolean / Number / Function / Array	true	0 或者 false 時不顯示 1或者true或者function或者array時顯示 2 :當屏幕寬度大於768px時顯示  3 :當屏幕寬度大於992px時顯示  4 :當屏幕寬度大於1200px時顯示 function 在函數體內返回標題 array 第一個參數表示可見性(0-4) 第二個參數就是標題
toolbar	Boolean / Number / Object	true	標題欄是否顯示和布局  0 或者 false 時不顯示 1或者true或者時顯示 2 :當屏幕寬度大於768px時顯示  3 :當屏幕寬度大於992px時顯示  4 :當屏幕寬度大於1200px時顯示
tooltip	Boolean	true	放大或縮小時顯示的百分比的文字提示 true : 顯示  false : 不顯示
movable	Boolean	true	是否可以拖動圖片
zoomable	Boolean	true	是否可以縮放圖片
rotatable	Boolean	true	是否可以旋轉圖片
scalable	Boolean	true	是否可以縮放圖片
transition	Boolean	true	為一些特殊元素啟用CSS3轉換。
fullscreen	Boolean	true	允許全屏播放
keyboard	Boolean	true	啟用鍵盤支持
backdrop	Boolean / String	true	啟用 modal 為false的時候不支持點擊背景關閉
loading	Boolean	true	加載圖片的時候的loading圖標
loop	Boolean	true	是否可以循環查看圖片
interval	Number	5000	定義圖片查看器的最小的寬度
minWidth	Number	200	定義圖片查看器的最小的高度
minHeight	Number	100	播放圖片時 距離下一張圖片的間隔時間
zoomRatio	Number	0.1	利用鼠標滾輪縮放圖片時的比例
minZoomRatio	Number	0.01	縮小圖片的最小比例
maxZoomRatio	Number	100	放大圖片的放大比例
zIndex	Number	2015	定義查看器的CSS z-index值 modal 模式下
zIndexInline	Number	0	定義查看器的CSS z-index值 inline 模式下
url	String / Function	src	原始圖像URL 如果是一個字符串，應該圖像元素的屬性之一 如果是一個函數，應該返回一個有效的圖像URL
container	Element / String	body	將查看器置於modal模式的容器  只有在 inline為 false的時候才可以使用
filter	Function	null	過濾圖像以便查看(如果圖像是可見的，應該返回true)
toggleOnDblclick	Boolean	true	當你放大或者縮小圖片時 雙擊還原
ready	Function	null	當查看圖片時被觸發的函數 只會觸發一次
show	Function	null	當查看圖片時被觸發的函數 每次查看都會觸發
shown	Function	null	當查看圖片時被觸發的函數 每次查看都會觸發 在show之后
hide	Function	null	當關閉圖片查看器時被觸發的函數 每次關閉都會觸發
hidden	Function	null	當關閉圖片查看器時被觸發的函數 每次關閉都會觸發 在hide之后
view	Function	null	當查看圖片時被觸發的函數 每次查看都會觸發 在shown之后
viewed	Function	null	當查看圖片時被觸發的函數 每次查看都會觸發 在view之后
zoom	Function	null	在圖片縮放時觸發
zoomed	Function	null	在圖片縮放時觸發 在 zoom之后

toolbal Object 詳解

key值名稱	說明
zoomIn	放大圖片的按鈕
zoomOut	縮小圖片的按鈕
reset	重置圖片大小的按鈕
prev	查看上一張圖片的按鈕
next	查看上一張圖片的按鈕
play	播放圖片的按鈕
rotateLeft	向左旋轉圖片的按鈕
rotateRight	向右旋轉圖片的按鈕
flipHorizontal	圖片左右翻轉的按鈕
flipVertical	圖片上下翻轉的按鈕

 

gitgub 地址： https://github.com/fengyuanchen/viewerjs#options

官網地址：https://fengyuanchen.github.io/viewerjs/