Vue图片浏览组件v-viewer使用

简单介绍v-viewer的两种使用方法:

Demo

安装依赖:

npm install v-viewer --save

全局引入

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

Vue.use(Viewer) 

数据格式:

 

一:点击图片列表预览图片

Vue图片浏览组件v-viewer使用_第1张图片

 


    for="src in imagesList" :src="src" :key="src">

 二:点击按钮预览图片

Vue图片浏览组件v-viewer使用_第2张图片

点击事件:

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

图片列表:(触发点击事件前处于隐藏状态)

for="src in imageList" :src="src" :key="src">

三:了解更多使用方法

end

你可能感兴趣的:(Vue图片浏览组件v-viewer使用)