首頁  >  文章  >  web前端  >  利用v-viewer結合vue 預覽相冊

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

铁手
铁手原創
2021-05-29 00:09:244379瀏覽

最近有一個需求是搭建相簿管理系統,需要按相簿展示圖片,於是前端用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="&#39;image &#39; + 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) // 预览当前图片
}

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn