vue中使用viewerjs

项目创建

vue init webpack mytest001

安装viewerjs

npm install viewerjs

删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue

index.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 mode
buttonBooleantrue是否显示查看图片时右上角的关闭按钮
navbarBoolean / Numbertrue是否显示底部导航栏
0 或者 false :不显示
1 或者 true :显示
2 :当屏幕宽度大于768px时显示
3 :当屏幕宽度大于992px时显示
4 :当屏幕宽度大于1200px时显示
titleBoolean / Number /
Function / Array
true 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
如果是一个字符串,应该图像元素的属性之一
如果是一个函数,应该返回一个有效的图像URL
containerElement / 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

    原文作者:李昊天
    原文地址: https://segmentfault.com/a/1190000016584946
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞