介紹

v-viewer是一款基于viewer.js的強(qiáng)大的插件，不但支持vue3版本，還支持vue2、JavaScript、jquery，有以下特點(diǎn)：

• 支持移動設(shè)備觸摸事件
• 支持響應(yīng)式
• 支持放大/縮小
• 支持旋轉(zhuǎn)（類似微博的圖片旋轉(zhuǎn)）
• 支持水平/垂直翻轉(zhuǎn)
• 支持圖片移動
• 支持鍵盤
• 支持全屏幻燈片模式（可做屏保）
• 支持縮略圖
• 支持標(biāo)題顯示
• 支持多種自定義事件

官網(wǎng)

官方網(wǎng)站網(wǎng)站里介紹了三種用法，基本用法寫的很詳細(xì)了，這邊就不再贅述，主要講講我使用這個(gè)插件的心路歷程

需求

接到任務(wù)要求寫一個(gè)圖片查看標(biāo)注系統(tǒng)，主要功能就是能查看圖片、縮放，并對圖片進(jìn)行添加、刪除標(biāo)簽的操作，并且明確不要用element的圖片查看器，說是不好用……隨手一百度就能找到這款viewer.js，經(jīng)過一番探索，發(fā)現(xiàn)居然還有支持vue2、支持vue3的版本，開心！就決定用你啦?。ㄟ€是開心的太早了……）

系統(tǒng)功能

系統(tǒng)包含一下功能：

• 切換圖片要獲取到當(dāng)前展示的哪一張圖片
• 點(diǎn)擊圖片縮略圖可以重新排序并展示當(dāng)前圖片
• 能給當(dāng)前圖片添加標(biāo)簽
• 切換圖片時(shí)獲取當(dāng)前圖片的標(biāo)簽并展示標(biāo)簽

構(gòu)造頁面

頁面形式確定后，首先想到是用API形式使用，因?yàn)榭梢噪S時(shí)隨地想用就用，但就發(fā)現(xiàn)問題了，那就是inline模式下，查看大圖的窗口沒有辦法關(guān)閉，會一直罩著，于是就放棄API了，然后就不知道為啥，經(jīng)過嘗試之后選擇directive，以指令形式使用，其實(shí)組件和指令的都是大同小異，大家看著來就行。

改善頁面

inline模式下，查看大圖會一直無法關(guān)閉，怎么辦呢？

改下頁面布局，上面部分是圖片的縮略圖

預(yù)想的是點(diǎn)擊圖片下方主頁面部分會切換圖片的展示，

HTML部分代碼如下

<div class="left">
  <div class="imgs" v-viewer.rebuild="options" >
    <template >
      <div v-for="src in showimages" :key="src.name">
        <img :src="src.url" class="img" >
      </div>
    </template>
  </div>
</div>

官方例子中，<template>中是沒有<div>標(biāo)簽的，因?yàn)?code><template>標(biāo)簽上加key會報(bào)錯，所以就再加了一層<div>包裹，也就是這個(gè)<div>，導(dǎo)致我走了不少彎路，為什么呢？在我們往綁定的showimages里面添加、刪除元素時(shí)，整個(gè)頁面看起來沒有變化……也就是這個(gè)變動對viewer來說沒有生效。

解決辦法

經(jīng)過研究，在viewer.js中，有一個(gè)判斷image數(shù)組是否發(fā)生變化的函數(shù)imageDiff,在這個(gè)函數(shù)中，判斷是否發(fā)生變化的條件是，獲取指令元素的子元素中的<img>標(biāo)簽，而我用<div>包裹住了<img>會導(dǎo)致找到的<img>個(gè)數(shù)為0，所以導(dǎo)致無法更新image數(shù)組。所以解決的辦法就是直接寫<img>元素或者template下不要寫<div>直接寫<img>

就這個(gè)問題，看了一早上才看出來問題…嗚嗚嗚我是菜雞前端。解決這個(gè)問題之后，只需要改變數(shù)組順序，對數(shù)組進(jìn)行操作就可以實(shí)現(xiàn)切換展示圖片。

切換圖片的回調(diào)函數(shù)

當(dāng)用戶點(diǎn)擊viewer切換圖片時(shí)，我希望最上面的圖片展示也能切換到當(dāng)前展示的這一張，對viewer來說，有提供幾個(gè)回調(diào)函數(shù)，其中就有view和viewed，所以我們只需要在options中定義好view函數(shù)，就可以獲取到當(dāng)前展示的數(shù)據(jù)的下標(biāo)，或者e.detail.image對象下有src和currentSrc字段分別記錄了圖片文件名和圖片路徑，可以根據(jù)這個(gè)高亮顯示當(dāng)前選中的圖片。
其實(shí)是有更好的方法，就是viewer自帶view(index)方法可以指定查看圖片的下標(biāo)，但是這個(gè)我調(diào)用了沒有生效，所以暫時(shí)用 平替方法代替，就是修改viewer展示數(shù)組順序，這樣會銷毀重繪viewer，使用起來體驗(yàn)是沒什么區(qū)別的。

選中的圖片高亮顯示

選中圖片的高亮顯示只需要動態(tài)獲取當(dāng)前選中圖片的key或者id，動態(tài)添加css就可以了。

在viewer中，有一個(gè)圖片切換完成的回調(diào)函數(shù)viewed，還有切換圖片之前的回調(diào)函數(shù)view，可以根據(jù)需要在option中設(shè)置。當(dāng)用戶點(diǎn)擊上一張或下一張的時(shí)候，回調(diào)函數(shù)的入?yún)?code>e.detail.index，這個(gè)是當(dāng)前圖片在數(shù)組中的下標(biāo)，可以根據(jù)下標(biāo)獲取到當(dāng)前圖片的信息。

其他整理

這部分大都來自于viewer.js官方文檔，v-viewer是基于viewer.js的

Options

用法：

Viewer.setDefaults(options)
options = {
	inline :true,
	fullsreen: false
}

inline

• Type: Boolean
• Default : false
  是否啟用inline模式—inline模式就是在區(qū)域內(nèi)展示，不是全屏幕覆蓋

backdrop

• Type: Boolean or String
• Default : true

啟用modal背景，為單擊時(shí)不會關(guān)閉模態(tài)的背景指定靜態(tài)

button

• Type: Boolean
• Default : true

是否顯示右上角關(guān)閉按鈕

navbar

是否顯示縮略圖導(dǎo)航

• Type: Boolean or Number
• Default : true
• Options :
  0 or false: 隱藏縮略圖導(dǎo)航
  1 or true: 顯示縮略圖導(dǎo)航
  2: 僅當(dāng)屏幕寬度大于768像素時(shí)顯示導(dǎo)航欄
  3: 僅當(dāng)屏幕寬度大于992像素時(shí)顯示導(dǎo)航欄
  4: 僅當(dāng)屏幕寬度大于1200像素時(shí)顯示導(dǎo)航欄

title

指定標(biāo)題的可見性和內(nèi)容

• Type: Boolean or Number or Function or Array
• Default: true
• Option:
  0 or false: 不顯示標(biāo)題
  1 or true or Function or Array:顯示標(biāo)題
  2: 僅當(dāng)屏幕寬度大于768像素時(shí)顯示標(biāo)題
  3: 僅當(dāng)屏幕寬度大于992像素時(shí)顯示標(biāo)題
  4: 僅當(dāng)屏幕寬度大于1200像素時(shí)顯示標(biāo)題
  Function: 自定義標(biāo)題內(nèi)容
  [Number, Function]: Number指示可見性，Function自定義標(biāo)題內(nèi)容

toolbar

指定工具欄及其按鈕的可見性和布局。

• Type: Boolean or Number or Object
• Default: true
• Options:
  0 or false: 隱藏工具欄.
  1 or true: 顯示工具欄.
  2: 僅當(dāng)屏幕寬度大于768像素時(shí)顯示工具欄
  3: 僅當(dāng)屏幕寬度大于992像素時(shí)顯示工具欄
  4: 僅當(dāng)屏幕寬度大于1200像素時(shí)顯示工具欄
  { key: Boolean | Number }: 顯示或隱藏工具欄.
  { key: String }: 自定義工具欄大小(size).
  { key: Function }: 自定義工具欄按鈕的單擊處理函數(shù).
  { key: { show: Boolean | Number, size: String, click: Function }: 自定義按鈕的每個(gè)屬性.
  Available built-in keys(key可選項(xiàng)): “zoomIn”, “zoomOut”, “oneToOne”, “reset”, “prev”, “play”, “next”, “rotateLeft”, “rotateRight”, “flipHorizontal”, “flipVertical”.
  Available built-in sizes(size可選項(xiàng)): “small”, “medium” (default) and “large”.

className

要添加到viewer根元素的自定義類名。

• Type: String
• Default: ''

container

Document.querySelector的元素或有效選擇器，用于將viewer置于modal模式的容器。只在inline：false時(shí)有效

• Type: Element or String
• Default: 'body'

沒用過，不知道具體能填哪些字段

filter

指定篩選圖片的函數(shù)，會遍歷每張圖片，return true的圖片展示，return false的圖片隱藏，所以function應(yīng)有返回值

• Type: Function
• Default: null

注意，默認(rèn)情況下，沒有src屬性集的圖像將被忽略

fullscreen

自動播放時(shí)是否全屏

• Type: Boolean or FullscreenOptions
• Default: true

inheritedAttributes

定義要從原始圖像繼承的額外屬性。

• Type: Array
• Default: ['crossOrigin', 'decoding', 'isMap', 'loading', 'referrerPolicy', 'sizes', 'srcset', 'useMap']

注意，基本屬性src和alt將始終繼承自原始圖像。

initialCoverage

定義查看圖像的初始覆蓋范圍。它必須是介于0（0%）和1（100%）之間的正數(shù)。

• Type: Number
• Default: 0.9

initialViewIndex

定義要查看的圖像的初始索引。指定開始查看圖像的下標(biāo)

• Type: Number
• Default: 0

也用作視圖方法的默認(rèn)參數(shù)值。

inline

啟用內(nèi)聯(lián)模式

• Type: Boolean
• Default: false

interval

播放時(shí)自動循環(huán)圖像之間的間隔時(shí)間。單位：hms

• Type: Number
• Default: 5000

keyboard

是否允許用鍵盤操作（操作放大縮小、上一張下一張的功能）

• Type: Boolean
• Default: true

  

focus

Focus the active item in the navbar when initialized.

• Type: Boolean
• Default: true

需要將keyboard設(shè)置為true

loading

加載圖像時(shí)是否顯示加載微調(diào)器。

• Type: Boolean
• Default: true

loop

是否啟用循環(huán)查看(查看到最后一張，再點(diǎn)下一張?zhí)D(zhuǎn)到第一張)

• Type: Boolean
• Default: true

minWidth

指定viewer的最小寬度

• Type: Number
• Default: 200

只在inline是true時(shí)生效

minHeight

指定viewer的最小寬度

• Type: Number
• Default: 100

只在inline是true時(shí)生效

movable

是否可以移動圖片

• Type: Boolean
• Default: true

rotatable

是否允許旋轉(zhuǎn)圖片

• Type: Boolean
• Default: true

scalable

是否可以縮放圖像

• Type: Boolean
• Default: true

zoomable

是否可以縮放圖像

• Type: Boolean
• Default: true

zoomOnTouch

是否開啟觸摸縮放圖像功能

• Type: Boolean
• Default: true

zoomOnWheel

是否開啟鼠標(biāo)縮放圖像功能

• Type: Boolean
• Default: true

slideOnTouch

通過在觸摸屏上滑動，可以滑動到下一個(gè)或上一個(gè)圖像

• Type: Boolean
• Default: true

toggleOnDblclick

是否在雙擊圖像時(shí)在其自然大小和初始大小之間切換圖像大?。浑p擊圖像時(shí)自動調(diào)用切換方法

• Type: Boolean
• Default: true

tooltip

是否顯示縮放百分比

• Type: Boolean
• Default: true

transition

是否使用CSS3過度

• Type: Boolean
• Default: true

zIndex

圖片查看器modal模式時(shí)z-index值

• Type: Number
• Default: 2015

zIndexInline

圖片查看器inline模式時(shí)z-index值

• Type: Number
• Default: 0

zoomRatio

鼠標(biāo)滾輪滾動時(shí)縮放比例

• Type: Number
• Default: 0.1

minZoomRatio

最小縮放比例

• Type: Number
• Default: 0.01Define the min ratio of the image when zooming out.

maxZoomRatio

最大縮放比例

• Type: Number
• Default: 100Define the max ratio of the image when zooming in.

url

設(shè)置查看圖片時(shí)的圖片地址來源
如果它是一個(gè)字符串，它應(yīng)該是每個(gè)圖像元素的屬性之一。
如果它是一個(gè)函數(shù)，它應(yīng)該返回一個(gè)有效的圖像URL。

• Type: String or Function
• Default: 'src'

ready

回調(diào)函數(shù)，就緒時(shí)調(diào)用

• Type: Function
• Default: null

show

回調(diào)函數(shù)，加載展示圖層前調(diào)用

• Type: Function
• Default: null

shown

回調(diào)函數(shù)，加載展示圖層完成后調(diào)用

• Type: Function
• Default: null

hide

回調(diào)函數(shù)，點(diǎn)擊關(guān)閉展示按鈕時(shí)調(diào)用

• Type: Function
• Default: null

hidden

回調(diào)函數(shù)，展示圖層關(guān)閉前調(diào)用

• Type: Function
• Default: null

view

回調(diào)函數(shù)，加載展示圖片前調(diào)用

• Type: Function
• Default: null

viewed

回調(diào)函數(shù)，加載展示圖片后調(diào)用

• Type: Function
• Default: null

move

回調(diào)函數(shù)，圖片移動時(shí)調(diào)用

• Type: Function
• Default: null

moved

回調(diào)函數(shù)，圖片異動后調(diào)用

• Type: Function
• Default: null

rotate

回調(diào)函數(shù)，圖片旋轉(zhuǎn)前調(diào)用

• Type: Function
• Default: null

rotated

回調(diào)函數(shù)，圖片旋轉(zhuǎn)后調(diào)用

• Type: Function
• Default: null

scale

回調(diào)函數(shù)，圖片縮放前調(diào)用

• Type: Function
• Default: null

scaled

回調(diào)函數(shù)，圖片縮放后調(diào)用

• Type: Function
• Default: null

zoom

回調(diào)函數(shù)，圖片縮放前調(diào)用

• Type: Function
• Default: null

zoomed

回調(diào)函數(shù)，圖片縮放后調(diào)用

• Type: Function
• Default: null

play

回調(diào)函數(shù)，圖片開始自動播放時(shí)調(diào)用

• Type: Function
• Default: null

stop

回調(diào)函數(shù)，圖片停止自動播放時(shí)調(diào)用

• Type: Function
• Default: null

method

用法：獲取到實(shí)例

 const viewer = this.$el.querySelector('.viewer').$viewer
 viewer.show()

show([immediate])

是否立即顯示查看器，只在modal模式下有效

• immediate (optional):
  • Type: Boolean
  • Default: false

view([index])

使用viewer查看下標(biāo)為index的圖片。如果viewer被隱藏，改圖片將首先顯示

• index (optional):
  • Type: Number
  • Default: 0 (繼承自 initialViewIndex )
  • 展示圖片的下標(biāo)

viewer.view(1); // 展示下標(biāo)是1的圖片（第二張）

prev([loop=false])

是否設(shè)置第一張圖片的上一張是最后一張圖片（頭尾相接）

• loop (optional):
  • Type: Boolean
  • Default: false

next([loop=false])

是否設(shè)置最后一張圖片的下一張是第一一張圖片（頭尾相接）

• loop (optional):
  • Type: Boolean
  • Default: false

move(x[, y = x])

使用相對偏移移動圖像

• x:

  • Type: Number
  • 水平方向上的移動距離

• y (optional):

  • Type: Number
  • 豎直方向上的移動距離
  • 如果不存在，則其默認(rèn)值為x

Move the image with relative offsets.

viewer.move(1);
viewer.move(-1, 0); // 左移
viewer.move(1, 0);  // 右移
viewer.move(0, -1); // 上移
viewer.move(0, 1);  // 下移

moveTo(x[, y = x])

移動圖像到指定位置

• x:

  • Type: Number
  • 新位置的水平坐標(biāo)

• y (optional):

  • Type: Number
  • 指定位置的豎直坐標(biāo)
  • 如不存在，默認(rèn)和 x相同.

rotate(degree)

在原來的基礎(chǔ)上旋轉(zhuǎn)圖像

• degree:
  • Type: Number
  • 向右旋轉(zhuǎn): 輸入正數(shù) (degree > 0)
  • 向左旋轉(zhuǎn): 輸入負(fù)數(shù) (degree < 0)

viewer.rotate(90);
viewer.rotate(-90);

rotateTo(degree)

旋轉(zhuǎn)圖像至指定角度

• degree:
  • Type: Number

viewer.rotateTo(0); // 轉(zhuǎn)到0°
viewer.rotateTo(360); // 轉(zhuǎn)一圈

scale(scaleX[, scaleY])

圖像翻轉(zhuǎn)

• scaleX:

  • Type: Number
  • Default: 1
  • 豎直方向翻轉(zhuǎn)
  • 輸入1時(shí)，不起作用

• scaleY (optional):

  • Type: Number
  • 豎直方向翻轉(zhuǎn)
  • 為空時(shí)，等于x

viewer.scale(-1); // Flip both horizontal and vertical
viewer.scale(-1, 1); // Flip horizontal
viewer.scale(1, -1); // Flip vertical

scaleX(scaleX)

圖像水平方向翻轉(zhuǎn)

• scaleX:
  • Type: Number
  • Default: 1
  • 圖像水平方向翻轉(zhuǎn)

viewer.scaleX(-1); // Flip horizontal

scaleY(scaleY)

圖像豎直方向翻轉(zhuǎn)

• scaleY:
  • Type: Number
  • Default: 1
  • 圖像豎直方向翻轉(zhuǎn)
  • 取1時(shí)不起作用，不會發(fā)生變化

viewer.scaleY(-1); // Flip vertical

zoom(ratio[, showTooltip[, pivot]])

以指定比例縮放圖像

• ratio:

  • Type: Number
  • Zoom in: 放大：正數(shù) (ratio > 0)
  • Zoom out: 縮?。贺?fù)數(shù) (ratio < 0)

• showTooltip (optional):

  • Type: Boolean
  • Default: false
  • 是否展示縮放比例等提示信息

• pivot (optional):

  • Type: Object
  • Default: null
  • Schema: { x: Number, y: Number }
  • 縮放的軸心點(diǎn)坐標(biāo)

viewer.zoom(0.1);
viewer.zoom(-0.1);

zoomTo(ratio[, showTooltip[, pivot]])

縮放圖像到指定比例

• ratio:

  • Type: Number
  • 需要正數(shù) (ratio > 0)

• showTooltip (optional):

  • Type: Boolean
  • Default: false
  • 是否展示縮放比例等提示信息

• pivot (optional):

  • Type: Object
  • Default: null
  • Schema: { x: Number, y: Number }
  • 縮放的軸心點(diǎn)坐標(biāo)

viewer.zoomTo(0); // Zoom to zero size (0%)
viewer.zoomTo(1); // Zoom to natural size (100%)

// Zoom to 50% from the center of the window.
viewer.zoomTo(.5, {
  x: window.innerWidth / 2,
  y: viewer.innerHeight / 2,
});

play([fullscreen])

• fullscreen (optional):
  • Type: Boolean or FullscreenOptions
  • Default: false
  • Indicate if request fullscreen or not.

Play the images.

stop()

停止播放

full()

inline模式下有效，播放時(shí)全屏

exit()

退出全屏
inline模式下有效

Events

所有事件都可以在其處理程序中使用this.viewe訪問查看器實(shí)例。

Be careful to use these events with other components which have the same event names, e.g.: Bootstrap’s modal.

let viewer;

image.addEventListener('viewed', function () {
  console.log(this.viewer === viewer);
  // > true
});

viewer = new Viewer(image);

ready

viewer 準(zhǔn)備好的時(shí)候會觸發(fā)此事件,在modal模式下，只有點(diǎn)擊查看了圖片才會觸發(fā)此事件

• event.bubbles: true
• event.cancelable: true
• event.detail: null

show

在viewer show的時(shí)候會觸發(fā)此事件，只在modal 模式下有效

• event.bubbles: true
• event.cancelable: true
• event.detail: null

shown

• event.bubbles: true
• event.cancelable: true
• event.detail: null

This event fires when the viewer modal has shown.

Only available in modal mode.

hide

• event.bubbles: true
• event.cancelable: true
• event.detail: null

This event fires when the viewer modal starts to hide.

Only available in modal mode.

hidden

• event.bubbles: true
• event.cancelable: false
• event.detail: null

This event fires when the viewer modal has hidden.

Only available in modal mode.

view

• event.bubbles: true
• event.cancelable: true
• event.detail.index:
  • Type: Number
  • The index of the original image.
• event.detail.image:
  • Type: HTMLImageElement
  • The current image (a clone of the original image).
• event.detail.originalImage:
  • Type: HTMLImageElement
  • The original image.

This event fires when a viewer starts to show (view) an image.

viewed

• event.bubbles: true
• event.cancelable: false
• event.detail: the same as the view event.

This event fires when a viewer has shown (viewed) an image.

move

• event.bubbles: true
• event.cancelable: true
• event.detail.x:
  • Type: Number
  • The new position in the horizontal direction.
• event.detail.y:
  • Type: Number
  • The new position in the vertical direction.
• event.detail.oldX:
  • Type: Number
  • The old position in the horizontal direction.
• event.detail.oldY:
  • Type: Number
  • The old position in the vertical direction.
• event.detail.originalEvent:
  • Type: Event or null
  • Options: pointermove, touchmove, and mousemove.

This event fires when a viewer starts to move an image.

moved

• event.bubbles: true
• event.cancelable: false
• event.detail: the same as the move event.

This event fires when a viewer has moved an image.

rotate

• event.bubbles: true
• event.cancelable: true
• event.detail.degree:
  • Type: Number
  • The new rotation degrees.
• event.detail.oldDegree:
  • Type: Number
  • The old rotation degrees.

This event fires when a viewer starts to rotate an image.

rotated

• event.bubbles: true
• event.cancelable: false
• event.detail: the same as the rotate event.

This event fires when a viewer has rotated an image.

scale

• event.bubbles: true
• event.cancelable: true
• event.detail.scaleX:
  • Type: Number
  • The new scaling factor in the horizontal direction.
• event.detail.scaleY:
  • Type: Number
  • The new scaling factor in the vertical direction.
• event.detail.oldScaleX:
  • Type: Number
  • The old scaling factor in the horizontal direction.
• event.detail.oldScaleY:
  • Type: Number
  • The old scaling factor in the vertical direction.

This event fires when a viewer starts to scale an image.

scaled

• event.bubbles: true
• event.cancelable: false
• event.detail: the same as the scale event.

This event fires when a viewer has scaled an image.

zoom

• event.bubbles: true
• event.cancelable: true
• event.detail.ratio:
  • Type: Number
  • The new (next) ratio of the image (imageData.width / imageData.naturalWidth).
• event.detail.oldRatio:
  • Type: Number
  • The old (current) ratio of the image.
• event.detail.originalEvent:
  • Type: Event or null
  • Options: wheel, pointermove, touchmove, and mousemove.

This event fires when a viewer starts to zoom (in or out) an image.

zoomed

• event.bubbles: true
• event.cancelable: false
• event.detail: the same as the zoom event.

This event fires when a viewer has zoomed (in or out) an image.

play

• event.bubbles: true
• event.cancelable: true
• event.detail: null

This event fires when the viewer starts to play.

You can abort the playing process by calling event.preventDefault().

stop

• event.bubbles: true
• event.cancelable: true
• event.detail: null

This event fires when the viewer starts to stop.

You can abort the stopping process by calling event.preventDefault().

總結(jié) 

到此這篇關(guān)于vue3使用viewer的文章就介紹到這了,更多相關(guān)vue3使用viewer內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！