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

Posted seanvigour

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于Vue图片浏览组件v-viewer使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue实现图片大图预览,v-viewer组件的使用方法演示

Vue实现图片大图预览,v-viewer组件的使用方法演示

Vue实现图片大图预览,v-viewer组件的使用方法演示

React 图片浏览器 rc-viewer

Vue使用v-viewer插件实现图片放大缩小的功能

Vue插件(点击图片放大)v-viewer使用