前端viewer.js实现图片预览
github地址
https://github.com/fengyuanchen/viewerjs#options
下载文件
git clone 复制的链接
在js外部依赖中导入如下文件即可使用(/viewerjs\dist文件路径下)
vue非脚手架中使用
以下是动态绑定数据状态下的 代码直接拷过来的
<link rel="stylesheet" href="../../../js/plugins/viewerjs/viewer.css">
<script src="../../../js/plugins/viewerjs/viewer.js"></script>
<img :title="'创建时间:'+item.createTime+' 大小:'+item.size+'kb'" style="width: 100%;height:100px;cursor: pointer;" @click='getDisplay(item.filePath,index)' :class='"imageClass"+index' :data-original='imageSrc' src="../../../img/image.jpg">
getDisplay(path,index){
this.path = path;
this.index = index;
const tempPath = path.substring(path.indexOf('fileserver'),path.length);
this.imageSrc = this.baseURL + tempPath;
var viewer = new Viewer(document.querySelector(`.imageClass${index}`),{url:'data-original'});
},
注意点
1.new Viewer(element,Object); 该构造方法,第一个参数必传,是dom或者jquery对象,并且该节点一定得是图片,不然会报错;这样的话,该点击事件getDisplay()绑定在按钮上也是可以的,只要保证两个参数正确。
绑定给按钮:
<el-button @click='btnClick'>点击</el-button>
这里的this.path,this.index是参数,这里不必纠结,因为代码是参照我的项目的具体情况来的,开发人员只需要再点击按钮时,拿到图片链接就好了;
btnClick(){
document.querySelector(`.imageClass${this.index}`).click();
this.getDisplay(this.path,this.index);
},
第二个参数是个对象,是预览图片时的配置栏;
2.img标签上的*:data-original*要绑定的是预览时的图片链接,在这里是动态的,所以我采用绑定方式,在每次new Viewer之前将图片链接赋值过去
3.通常使用默认的配置就足够使用了
jquery拿来即用(示例)
实现图片预览和左右滑动以及大小缩放旋转等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./js/viewer.min.css">
</head>
<body>
<ul id="dowebok" style="width: 100%;display: flex;flex-wrap: wrap;">
<li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/1.jpg" src="img/1jpg" alt="图片1"></li>
<li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/2.jpg" src="img/2.jpg" alt="图片2"></li>
<li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/3.jpg" src="img/3.jpg" alt="图片3"></li>
<li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/4.jpg" src="img/4.jpg" alt="图片4"></li>
<li style="width: 30%;"><img style="width: 100%;height: auto;" data-original="img/5.jpg" src="img/5.jpg" alt="图片5"></li>
</ul>
<script src="./js/jquery.min.js"></script>
<script src="./js/viewer.min.js"></script>
<script>
$('img').click(function(){
var viewer = new Viewer(document.querySelector('#dowebok'), {
url: 'data-original',
});
})
</script>
</body>
</html>