Vue圖片瀏覽組件v-viewer使用

簡單介紹v-viewer的兩種使用方法：

Demo

安裝依賴：

npm install v-viewer --save

全局引入

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

Vue.use(Viewer) 

數據格式：

 

一：點擊圖片列表預覽圖片

 

<viewer :images="imagesList">
    <img v-for="src in imagesList" :src="src" :key="src">
</viewer>

 二：點擊按鈕預覽圖片

點擊事件：

imageView () {
     const viewer = this.$el.querySelector('.images').$viewer
     viewer.show()
}

圖片列表：(觸發點擊事件前處於隱藏狀態)

<div v-show="false" v-viewer="{movable: false}">
    <img v-for="src in imageList" :src="src" :key="src">
</div>

三：了解更多使用方法

end