需求分析
项目中使用了vue脚手架,要在vue组件中使用一个图片预览的功能,提供给客户一些基本的图片预览功能,包括缩略图,放大缩小,全屏浏览等基础功能,这里看了一些轮子,有view-photo-view,viewer,js等等库;对比了,感觉项目中使用viewerjs就可以了,然后去github上看了它的readme和一些api,算是比较详细;上手比较简单,应用不复杂,价值交付性价比较高,所以选择了viewerjs;接下来,对viewerjs在项目中的学习使用作为记录;
使用环境分析
1 vue@cli 3.x脚手架
2 viwerjs
使用方法均按照
https://github.com/fengyuanchen/viewerjs/blob/master/README.md
进行翻译测试
安装
有两种使用方式
1 直接下载下来,传统引入
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>
这个方式很简单,没有太多介绍的必要
2 在vue组件中使用
(1) npm install viewerjs 安装到node_modules中
(2) import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
在组件中的script中引入
使用规则:new Viewer(element[, options])
element-->html元素
options-->相关选项
举例:
<div>
<img id="image" src="picture.jpg" alt="Picture">
</div>
<div>
<ul id="images">
<li><img src="picture-1.jpg" alt="Picture 1"></li>
<li><img src="picture-2.jpg" alt="Picture 2"></li>
<li><img src="picture-3.jpg" alt="Picture 3"></li>
</ul>
</div>
下面是script里面的写法,这里我省略了<script></script>标签
// You should import the CSS file.
// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
// View an image
const viewer = new Viewer(document.getElementById('image'), {
inline: true,
viewed() {
viewer.zoomTo(1);
},
});
// Then, show the image by click it, or call `viewer.show()`.
// View a list of images
const gallery = new Viewer(document.getElementById('images'));
// Then, show one image by click it, or call `gallery.show()`.
options讲解
这里我以多例图片进行测试,先构建出eg,然后分批测试
<div style="position:absolute;left:100px;top:200px;width:400px;height:400px;border:solid 1px red;z-index:100000">
<ul id="images" >
<li> <img src="../assets/logo.png" alt="Picture"></li>
<li> <img src="../assets/logo.png" alt="Picture"></li>
<li> <img src="../assets/logo.png" alt="Picture"></li>
</ul>
</div>
const viewer1 = new Viewer(document.getElementById('images'), {});
(1) 默认状态
(1)启用inline模式
const viewer1 = new Viewer(document.getElementById('images'), {
inline: true, //启用inline模式
});
然后这里有背景,我们把它隐藏掉
(2) backdrop
const viewer1 = new Viewer(document.getElementById('images'), {
inline: true,//启用inline模式
backdrop:false,//是否启用背景
// viewed() {
// viewer.zoomTo(1);
// },
});
…
哎,一些简单的常用的,我就不一一列举了,碰到稍微难点的我在列举,不过简单的都会测试,迭代
(3) title
const viewer1 = new Viewer(document.getElementById('images'), {
inline: true,//启用inline模式
backdrop:false,//是否启用背景
button:true,//是否展示右上侧的按钮,放大缩小
navbar:1,//对缩略图的控制,可以设置boolean或者数字,false全隐藏,0隐藏 1展示,234分别是针对屏幕大于多少进行展示
title:function(data,node,ss){
console.log(data);
console.log(node);
console.log(ss);
}
});
这个title控制的就是上二图总的红色框部分,并且还提供了数组的形式,可以对每个图形的title进行控制
(4) toolbar
const viewer1 = new Viewer(document.getElementById('images'), {
inline: true,//启用inline模式
backdrop:false,//是否启用背景
button:true,//是否展示右上侧的按钮,放大缩小
navbar:1,//对缩略图的控制,可以设置boolean或者数字,false全隐藏,0隐藏 1展示,234分别是针对屏幕大于多少进行展示
title:function(data,node,ss){
console.log(data);
console.log(node);
console.log(ss);
},
toolbar:{ //控制功能按钮的大小,方法等
zoomIn:1,
zoomOut:4,
},
});
所有属性的统一解释:
const viewer1 = new Viewer(document.getElementById('images'), {
inline: true,//启用inline模式
backdrop:false,//是否启用背景
button:true,//是否展示右上侧的按钮,放大缩小
navbar:1,//对缩略图的控制,可以设置boolean或者数字,false全隐藏,0隐藏 1展示,234分别是针对屏幕大于多少进行展示
// title:function(data,node,ss){
// console.log(data);
// console.log(node);
// console.log(ss);
// },
// toolbar:{ //控制功能按钮的大小,方法等
// zoomIn:1,
// zoomOut:4,
// },
className:'ss', //增加ss到viewer的根元素class上
// filter:function(data){
// console.log(data)
// return data.alt=="Picture1"
// },//过滤展示的图片
fullscreen:true,//全屏支持
inheritedAttributes:['crossOrigin', 'decoding', 'isMap', 'loading'],
initialViewIndex:1,//图片的初始索引
interval:1000,//图片轮播的总时间
keyboard:true,//是否支持键盘操作,比如esc退出全屏等功能
loading:true,//loading等待画面
minWidth:300,//最小宽度,只在inline模式下有用
minHeight:200,//最小高度,只在inline模式下有用
movable:true,//是否允许移动图片
rotatable:true,//是否允许翻折图片
scalable:true,//是否允许翻转图片
zoomable:true,//是否允许缩放图片
zoomOnTouch:true,//缩放通过触摸
zoomOnWheel:true,//通过滚轮缩放
slideOnTouch:true,//允许通过触摸滑动上下图片
toggleOnDblclick:true,//指示是否在双击图像时在自然尺寸和初始尺寸之间切换图像尺寸
tooltip:true,//放大或缩小时,以图像比率(百分比)显示工具提示
transition:true,//允许为某些特殊元素启用CSS3过渡
zIndex:3333,//css z-index值
zoomRatio:0.5,//通过滚轮鼠标缩放图像时定义比例
minZoomRatio:0.02,//定义缩小时图像的最小比例
maxZoomRatio:100,//定义放大时图像的最大比例
// url: //图片地址
ready:function(){
console.log("可以开始做某事了")
},
show:function(){
console.log("可以开始展示某事了")
},
shown:function(){
console.log("可以开始shown某事了")
},
hide:function(){
console.log("可以开始隐藏某事了")
},
hidden:function(){
console.log("可以开始hidden某事了")
},
view:function(){
console.log("可以开始view某事了")
//切换图片触发
},
viewed:function(){
console.log("可以开始viewed某事了")
//切换完图片触发
},
zoom:function(){
console.log("可以开始zoom某事了")
//放大缩小图片时图片触发
},
zoomed:function(){
console.log("可以开始zoomed某事了")
//放大缩小图片完后进行触发
},
});