利用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 class="&#39;image &#39; + newClass[i]  lazy"  src="/static/imghwm/default1.png"  data-src="src"  v-for="(src,i) in scope.images"
                : :key="src" : @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) // 预览当前图片
}

總結：在碰到具體問題需要具體分析，有時需要更改原始程式碼才能解決問題；（​​有問題歡迎諮詢探討，申請時備註一下哦。微訊號：13163923579）

以上是利用v-viewer結合vue 預覽相冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！