viewerjs在vue@cli脚手架中的使用详解

需求分析

项目中使用了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某事了")
    //放大缩小图片完后进行触发
  },
  
});