快捷導(dǎo)航

vue3使用viewer的詳細(xì)用法舉例

更新時間：2023年12月12日 15:12:01 作者：荔枝兒i

viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細(xì)用法,文中通過代碼介紹是非常詳細(xì),需要的朋友可以參考下

介紹

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

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

官網(wǎng)

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

需求

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

系統(tǒng)功能

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

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

構(gòu)造頁面

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

改善頁面

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

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

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

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)簽的，因為<template>標(biāo)簽上加key會報錯，所以就再加了一層<div>包裹，也就是這個<div>，導(dǎo)致我走了不少彎路，為什么呢？在我們往綁定的showimages里面添加、刪除元素時，整個頁面看起來沒有變化……也就是這個變動對viewer來說沒有生效。

解決辦法

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

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

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

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

選中的圖片高亮顯示

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

在viewer中，有一個圖片切換完成的回調(diào)函數(shù)viewed，還有切換圖片之前的回調(diào)函數(shù)view，可以根據(jù)需要在option中設(shè)置。當(dāng)用戶點擊上一張或下一張的時候，回調(diào)函數(shù)的入?yún)?code>e.detail.index，這個是當(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背景，為單擊時不會關(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像素時顯示導(dǎo)航欄
3: 僅當(dāng)屏幕寬度大于992像素時顯示導(dǎo)航欄
4: 僅當(dāng)屏幕寬度大于1200像素時顯示導(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像素時顯示標(biāo)題
3: 僅當(dāng)屏幕寬度大于992像素時顯示標(biāo)題
4: 僅當(dāng)屏幕寬度大于1200像素時顯示標(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像素時顯示工具欄
3: 僅當(dāng)屏幕寬度大于992像素時顯示工具欄
4: 僅當(dāng)屏幕寬度大于1200像素時顯示工具欄
{ key: Boolean | Number }: 顯示或隱藏工具欄.
{ key: String }: 自定義工具欄大小(size).
{ key: Function }: 自定義工具欄按鈕的單擊處理函數(shù).
{ key: { show: Boolean | Number, size: String, click: Function }: 自定義按鈕的每個屬性.
Available built-in keys(key可選項): “zoomIn”, “zoomOut”, “oneToOne”, “reset”, “prev”, “play”, “next”, “rotateLeft”, “rotateRight”, “flipHorizontal”, “flipVertical”.
Available built-in sizes(size可選項): “small”, “medium” (default) and “large”.

className

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

Type: String
Default: ''

container

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

Type: Element or String
Default: 'body'

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

filter

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

Type: Function
Default: null

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

fullscreen

自動播放時是否全屏

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

播放時自動循環(huán)圖像之間的間隔時間。單位：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

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

Type: Boolean
Default: true

loop

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

Type: Boolean
Default: true

minWidth

指定viewer的最小寬度

Type: Number
Default: 200

只在inline是true時生效

minHeight

指定viewer的最小寬度

Type: Number
Default: 100

只在inline是true時生效

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

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

Type: Boolean
Default: true

toggleOnDblclick

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

Type: Boolean
Default: true

tooltip

是否顯示縮放百分比

Type: Boolean
Default: true

transition

是否使用CSS3過度

Type: Boolean
Default: true

zIndex

圖片查看器modal模式時z-index值

Type: Number
Default: 2015

zIndexInline

圖片查看器inline模式時z-index值

Type: Number
Default: 0

zoomRatio

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

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

Type: String or Function
Default: 'src'

ready

回調(diào)函數(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ù)，點擊關(guān)閉展示按鈕時調(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ù)，圖片移動時調(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ù)，圖片開始自動播放時調(diào)用

Type: Function
Default: null

stop

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

Type: Function
Default: null

method

用法：獲取到實例

 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時，不起作用
scaleY (optional):
- Type: Number
- 豎直方向翻轉(zhuǎn)
- 為空時，等于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時不起作用，不會發(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 }
- 縮放的軸心點坐標(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 }
- 縮放的軸心點坐標(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模式下有效，播放時全屏

exit()

退出全屏
inline模式下有效

Events

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

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)備好的時候會觸發(fā)此事件,在modal模式下，只有點擊查看了圖片才會觸發(fā)此事件

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

show

在viewer show的時候會觸發(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3中使用viewerjs實現(xiàn)圖片預(yù)覽效果的項目實踐

vue3
viewer

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3使用viewer的詳細(xì)用法舉例

目錄

介紹

官網(wǎng)

需求

系統(tǒng)功能

構(gòu)造頁面

改善頁面

解決辦法

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

選中的圖片高亮顯示

其他整理

Options

inline

backdrop

button

navbar

title

toolbar

className

container

filter

fullscreen

inheritedAttributes

initialCoverage

initialViewIndex

inline

interval

keyboard

focus

loading

loop

minWidth

minHeight

movable

rotatable

scalable

zoomable

zoomOnTouch

zoomOnWheel

slideOnTouch

toggleOnDblclick

tooltip

transition

zIndex

zIndexInline

zoomRatio

minZoomRatio

maxZoomRatio

url

ready

show

shown

hide

hidden

view

viewed

move

moved

rotate

rotated

scale

scaled

zoom

zoomed

play

stop

method

show([immediate])

view([index])

prev([loop=false])

next([loop=false])

move(x[, y = x])

moveTo(x[, y = x])

rotate(degree)

rotateTo(degree)

scale(scaleX[, scaleY])

scaleX(scaleX)

scaleY(scaleY)