如何利用v-viewer結合vue預覽相冊

這篇文章主要介紹了如何利用v-viewer結合vue預覽相冊，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

最近有一個需求是搭建相冊管理系統，需要按相冊展示圖片，于是前端用vue,后端用tp5搭了一個小型的系統。

前端用到了v-viewer組件，有個問題碰到了在此記錄一下；就是在預覽圖片的時候由于圖片是動態加載的，預覽的時候就會動態刷新默認跳到第一張圖片上，解決的辦法就是預覽的時候阻止重新更新

具體步驟說明如下：

1、首先創建一個vue項目，利用vue腳手架創建（不懂的可以查看官方文檔，這邊不在說明）

2、在頁面引入v-viewer組件

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'

3、調用方式，在模板文件中編寫如下代碼

    <viewer :images="images" class="images clearfix" @inited="handleInited">
        <template slot-scope="scope">
            <img v-for="(src,i) in scope.images"
                :src="src" :key="src" :class="'image ' + newClass[i] " @click="handleShow(i)">
        </template>
    </viewer>

images傳入數組，每一項是圖片的路徑URL

4、只要后端接口拿到數據后，把圖片URL數組賦給images即可，如果是一次性獲取圖片沒有問題。如果圖片數量很多的情況，通常后端都是按分頁來獲取圖片，這時就要等圖片全部加載完成預覽才不會出現跳轉到第一張的情況；為了解決這個問題，就要看組件內部怎么處理的，查看代碼后發現只需要把監測images的變化動態更新注釋掉即可；

  watch: {
    images () {
      // this.$nextTick(() => {
      //   this.onChange()
      // })
    },

然后在圖片點擊的時候在調用更新update方法即可。參考如下代碼

 handleShow(index) {
    this.$viewer.update()
    this.$viewer.view(index) // 預覽當前圖片
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何利用v-viewer結合vue預覽相冊”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!