不用viewer插件
1弹出框
https://www.cnblogs.com/web1/p/8989967.html
2表格中
https://www.jianshu.com/p/c17f4f62704c
3自己封装vue组件
https://www.cnblogs.com/yesyes/p/6689082.html
用viewer插件
总体用法:
http://www.dowebok.com/192.html
注意:JS 版本兼容 IE9+,jQuery 版本兼容 IE8+。
1、引入文件
JS 版本:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js"></script>
jQuery 版本:
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/jquery.min.js"></script> <script src="js/viewer.min.js"></script>
注意:JS 版本和 jQuery 版本名字虽然一样,但代码不一样,不能通用,请到 github 上下载需要的版本。
2、HTML
<ul id="dowebok"> <li><img src="img/tibet-1.jpg" alt="图片1"></li> <li><img src="img/tibet-2.jpg" alt="图片2"></li> <li><img src="img/tibet-3.jpg" alt="图片3"></li> <li><img src="img/tibet-4.jpg" alt="图片4"></li> <li><img src="img/tibet-5.jpg" alt="图片5"></li> <li><img src="img/tibet-6.jpg" alt="图片6"></li> </ul>
3、JavaScript
JS 版本:
var viewer = new Viewer(document.getElementById('dowebok'));
jQuery 版本:
$('#dowebok').viewer();
配置
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
inline | 布尔值 | false | 启用 inline 模式 |
button | 布尔值 | true | 显示右上角关闭按钮(jQuery 版本无效) |
navbar | 布尔值/整型 | true | 显示缩略图导航 |
title | 布尔值/整型 | true | 显示当前图片的标题(现实 alt 属性及图片尺寸) |
toolbar | 布尔值/整型 | true | 显示工具栏 |
tooltip | 布尔值 | true | 显示缩放百分比 |
movable | 布尔值 | true | 图片是否可移动 |
zoomable | 布尔值 | true | 图片是否可缩放 |
rotatable | 布尔值 | true | 图片是否可旋转 |
scalable | 布尔值 | true | 图片是否可翻转 |
transition | 布尔值 | true | 使用 CSS3 过度 |
fullscreen | 布尔值 | true | 播放时是否全屏 |
keyboard | 布尔值 | true | 是否支持键盘 |
interval | 整型 | 5000 | 播放间隔,单位为毫秒 |
zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 |
minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 |
maxZoomRatio | 数字 | 100 | 最大缩放比例 |
zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index |
zIndexInline | 数字 | 0 | 设置图片查看器 inline 模式时的 z-index |
url | 字符串/函数 | src | 设置大图片的 url |
build | 函数 | null | 回调函数,具体查看演示 |
built | 函数 | null | 回调函数,具体查看演示 |
show | 函数 | null | 回调函数,具体查看演示 |
shown | 函数 | null | 回调函数,具体查看演示 |
hide | 函数 | null | 回调函数,具体查看演示 |
hidden | 函数 | null | 回调函数,具体查看演示 |
view | 函数 | null | 回调函数,具体查看演示 |
viewed | 函数 | null | 回调函数,具体查看演示 |
GitHub 地址:
方案二:在vscode中用法
链接:https://www.jianshu.com/p/c7e7c1550f42
第一步安装:
npm install v-viewer --save
第二步注册调用:
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
第三步注册:
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" } });
第四部使用:
<viewer :images="tupians">
<i-col span="4" v-for="item in tupians"> <div class="detailed"> <img :src="item.img" alt=""> </div> </i-col> </viewer> 数据部分 tupians:[ { img:tupian1, },{ img:tupian2, },{ img:tupian3, } ],
其他使用方法可以在github上查看viewerjs
方案三: js用法
来源:https://blog.csdn.net/m0_37885651/article/details/81060806
View Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="js/viewer.css"/> <script src="js/viewer.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .img-list{ clear: both; } .img-list li{ width:200px; height: 200px; margin: 10px; float: left; } img{ width: 100px; height: 100px; display: block; } </style> </head> <body> <ul id="images1" class="img-list"> <li> <img src="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png"/> </li> </ul> <!--二--> <ul id="image2" class="img-list"> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> <li> <img src="img/QQ图片20170920110853.png" data-imgurl="img/QQ图片20170920110853.png"/> </li> </ul> </body> <script type="text/javascript"> window.onload = function(){ var viewer = new Viewer(document.getElementById('images1'), {}); // var viewer = new Viewer(document.getElementById('image2'), { url: 'data-imgurl' }); } </script> </html>
相似:https://blog.csdn.net/archer119/article/details/78390203
难过的是本公司老项目:直接 使用vue和iview生成后的脚本开发,以上方法都不适用。
这是个伤心的故事,这个故事教育我们:先进生产工具和强大的工具链生态,决定生产力!
如果你用vscode开发,这些都不是问题。
如果你用vscode开发建议你选择element而不是iview,iview的坑比较多。