import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'Viewer.setDefaults({
'inline':false,
'button':true, //右上角按钮
"navbar": false, //底部缩略图
"title": false, //当前图片标题
"toolbar": false, //底部工具栏
"tooltip": false, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": true, //使用 CSS3 过度
"fullscreen": true, //播放时是否全屏
"keyboard": false, //是否支持键盘
"url": "data-source",
ready: function (e) {
console.log(e.type,'组件以初始化');
},
show: function (e) {
console.log(e.type,'图片显示开始');
},
shown: function (e) {
console.log(e.type,'图片显示结束');
},
hide: function (e) {
console.log(e.type,'图片隐藏完成');
},
hidden: function (e) {
console.log(e.type,'图片隐藏结束');
},
view: function (e) {
console.log(e.type,'视图开始');
},
viewed: function (e) {
console.log(e.type,'视图结束');
},
zoom: function (e) {
console.log(e.type,'图片缩放开始');
},
zoomed: function (e) {
console.log(e.type,'图片缩放结束');
}
});
设置好之后即可直接使用了。这里有一个小坑，员外在网上查了挺多 demo的，大多数的教程里面都是教您如何预览多张图片，但是员外的需要是只需要预览一张，所以在使用的时候也是绕了一点弯子的。 在 .vue 组件中使用： 首先员外先介绍一下多图片的使用方法： html中：
<template>
<div id="index">
<ul>
<li v-for="(item, index) in imgArr" :key="index">
<img :src="item" />
</li>
</ul>
</div>
</template>
```
js
```
data() {
return {
imgArr: [
"图片地址",
"图片地址",
"图片地址",
"图片地址",
"图片地址",
] };
},
mounted() {
//调用就是这么简单，直接 new 一个新 Viewer 对象即可
const viewer = new Viewer(document.getElementById("index"), {});
}
单个图片的使用方法其实跟上面的例子几乎一样： //html
<div class="img-box">
<img :src="warsher_before_img" alt="" id="warsher_before_img">
</div>
//js
mounted() {
//调用就是这么简单，直接 new 一个新 Viewer 对象即可
const viewer = new Viewer(document.getElementById('warsher_before_img'))
