我的环境是vue,nodejs环境,
功能:vue点击图片后预览放大(可旋转、翻转、缩放、上下切换、键盘操作)
使用:
1、首先是安装(进到nodejs目录下执行)
npm install v-viewer --save
2、安装完引用(还要记得引用它的css样式)
import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
3.vue注册调用,再调用setDefaults方法
Vue.use(Viewer);
Viewer.setDefaults({
'inline':false,
'button':false, //右上角按钮
"navbar": false, //底部缩略图
"title": false, //当前图片标题
"toolbar": true, //底部工具栏
"tooltip": true, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": false, //使用 CSS3 过度
"fullscreen": false, //播放时是否全屏
"keyboard": true, //是否支持键盘
"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,'视图结束');
// 索引为 1 的图片旋转20度
if(e.detail.index === 1){
this.viewer.rotate(20);
}
},
zoom: function (e) {
//console.log(e.type,'图片缩放开始');
},
zoomed: function (e) {
//console.log(e.type,'图片缩放结束');
}
});
这个都是放在这里
4.代码中调用使用
<div class="viewer-style" >
<viewer style="height: 200px;width:200px">
<img :src="自己的图片路径" align="left">
</viewer>
</div>
5.实现效果(我的上下翻页注释掉了,需要上一张下一张功能的小伙伴可以不用注释直接使用)
viewerjs插件 ,GitHub地址:https://github.com/fengyuanchen/viewerjs
补充:
如果不需要上一页下一页功能,需要注释掉本身的样式:打开viewer.css文件注释掉样式: