1、首先是安装
npm install v-viewer --save
2、安装完引用（还要记得引用它的css样式）
import Vue from 'vue';
import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'
3、vue注册调用
Vue.use(Viewer);
Viewer.setDefaults({
Options: { "inline":true, "button":true, "navbar":true, "title":true, "toolbar":true, "tooltip":true, "movable":true, "zoomable":true, "rotatable":true, "scalable":true, "transition":true, "fullscreen":true, "keyboard":true, "url": "data-source" }
});
说明：
名称默认值说明
inlinefalse启用 inline 模式
buttontrue显示右上角关闭按钮
navbartrue显示缩略图导航
titletrue显示当前图片的标题
toolbartrue显示工具栏
tooltiptrue显示缩放百分比
movabletrue图片是否可移动
zoomabletrue图片是否可缩放
rotatabletrue图片是否可旋转
scalabletrue图片是否可翻转
transitiontrue使用 CSS3 过度
fullscreentrue播放时是否全屏
keyboardtrue是否支持键盘
urlsrc设置大图片的 url
4、代码中使用
4.1、图片列表代码:
<div><viewer :images="signImages"><img v-for="src in signImages" :src="src" :key="src" width="50"></viewer></div>
let signImages = [
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg'
]
