vue中使用viewerjs

项目创建vue init webpack mytest001安装viewerjsnpm install viewerjs删掉生成的项目里面的helloWord.vue 修改路由创建一个index.vueindex.vue代码:<template> <div id=“index”> <ul> <li v-for="(item,index) of imgArr"><img :src=“item” alt=“图片描述”></li> </ul> </div></template><script> import Viewer from ‘viewerjs’; import ‘viewerjs/dist/viewer.css’; export default { name: ‘HelloWorld’, data() { return { imgArr:[ ‘https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3472263623,506218584&fm=26&gp=0.jpg’, ‘http://www.sinaimg.cn/dy/slidenews/21_img/2015_17/2236_4146071_705561.jpg’, ‘http://www.sinaimg.cn/dy/slidenews/21_img/2015_17/2236_4146072_346494.jpg’ ] } }, mounted(){ const ViewerDom = document.getElementById(‘index’); const viewer = new Viewer(ViewerDom, { // 相关配置项,详情见下面 }); } }</script><style> *{ padding:0; margin: 0; } ul { display: flex; flex-wrap: wrap; } ul li{ width:265px; height: 180px; list-style: none; border:2px solid #CCC; border-radius: 3px; padding: 1px; margin: 10px; cursor: pointer; } ul li img{ width:100%; height: 100%; }</style>键盘事件仅在modal mode下可用ESC 键: 退出全屏/关闭/退出/停止播放;Space 键: 停止/播放;←键: 查看上一张图片;→键: 查看下一张图片;↑键: 放大图片;↓键: 缩小图片;Ctrl + 0 组合键: 缩小到初始大小;Ctrl + 1 组合键: 放大到原始大小;配置参数如果要更改全局默认选项，可以使用view . setdefaults(选项)参数名称参数类型默认值说明initialViewIndexNumber0定义用于查看的图像的初始索引inlineBooleanfalse支持 inline modebuttonBooleantrue是否显示查看图片时右上角的关闭按钮navbarBoolean / Numbertrue是否显示底部导航栏 0 或者 false :不显示 1 或者 true :显示 2 :当屏幕宽度大于768px时显示 3 :当屏幕宽度大于992px时显示 4 :当屏幕宽度大于1200px时显示titleBoolean / Number / Function / Arraytrue 0 或者 false 时不显示1或者true或者function或者array时显示2 :当屏幕宽度大于768px时显示 3 :当屏幕宽度大于992px时显示 4 :当屏幕宽度大于1200px时显示function 在函数体内返回标题array 第一个参数表示可见性(0-4) 第二个参数就是标题toolbarBoolean / Number / Objecttrue标题栏是否显示和布局 0 或者 false 时不显示1或者true或者时显示 2 :当屏幕宽度大于768px时显示 3 :当屏幕宽度大于992px时显示 4 :当屏幕宽度大于1200px时显示 Object : Object类型详解tooltipBooleantrue放大或缩小时显示的百分比的文字提示true : 显示 false : 不显示movableBooleantrue是否可以拖动图片zoomableBooleantrue是否可以缩放图片rotatableBooleantrue是否可以旋转图片scalableBooleantrue是否可以缩放图片transitionBooleantrue为一些特殊元素启用CSS3转换。fullscreenBooleantrue允许全屏播放keyboardBooleantrue启用键盘支持backdropBoolean / Stringtrue启用 modal 为false的时候不支持点击背景关闭loadingBooleantrue加载图片的时候的loading图标loopBooleantrue是否可以循环查看图片intervalNumber5000定义图片查看器的最小的宽度minWidthNumber200定义图片查看器的最小的高度minHeightNumber100播放图片时距离下一张图片的间隔时间zoomRatioNumber0.1利用鼠标滚轮缩放图片时的比例minZoomRatioNumber0.01缩小图片的最小比例maxZoomRatioNumber100放大图片的放大比例zIndexNumber2015定义查看器的CSS z-index值 modal 模式下zIndexInlineNumber0定义查看器的CSS z-index值 inline 模式下urlString / Functionsrc原始图像URL如果是一个字符串，应该图像元素的属性之一如果是一个函数，应该返回一个有效的图像URLcontainerElement / Stringbody将查看器置于modal模式的容器只有在 inline为 false的时候才可以使用filterFunctionnull过滤图像以便查看(如果图像是可见的，应该返回true)toggleOnDblclickBooleantrue当你放大或者缩小图片时双击还原readyFunctionnull当查看图片时被触发的函数只会触发一次showFunctionnull当查看图片时被触发的函数每次查看都会触发shownFunctionnull当查看图片时被触发的函数每次查看都会触发在show之后hideFunctionnull当关闭图片查看器时被触发的函数每次关闭都会触发hiddenFunctionnull当关闭图片查看器时被触发的函数每次关闭都会触发在hide之后viewFunctionnull当查看图片时被触发的函数每次查看都会触发在shown之后viewedFunctionnull当查看图片时被触发的函数每次查看都会触发在view之后zoomFunctionnull在图片缩放时触发zoomedFunctionnull在图片缩放时触发在 zoom之后toolbar Object详解key值列表: “zoomIn”, “zoomOut”, “oneToOne”, “reset”, “prev”, “play”, “next”, “rotateLeft”, “rotateRight”, “flipHorizontal”, “flipVertical"key值名称说明zoomIn放大图片的按钮zoomOut缩小图片的按钮reset重置图片大小的按钮prev查看上一张图片的按钮next查看上一张图片的按钮play播放图片的按钮rotateLeft向左旋转图片的按钮rotateRight向右旋转图片的按钮flipHorizontal图片左右翻转的按钮flipVertical图片上下翻转的按钮{key:number|Boolean} 显示或者隐藏对应key的按钮为Number的时候为可见性{key: String } 自定义按钮的大小{ key: Function } 自定义按钮点击的处理{ key: { show: Boolean | Number, size: String, click: Function } 自定义按钮的每个属性size的取值范围: small medium default large