vue图片预览插件v-viewer不完全使用手册 upload组件配合viewer使用

先附上v-viewer的官方中文文档  viewer文档

 

安装:

 cnpm i  v-viewer

引入:

 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Viewer)

这篇文章只介绍两种使用方法:指令形式调用 和 组件形式调用

 

1.指令形式调用

<div class="images"
          v-viewer="{
            inline: false,
            button: true,
            navbar: false,
            title: false,
            toolbar: true,
            tooltip: false,
            movable: true,
            zoomable: true,
            rotatable: true,
            scalable: false,
            transition: true,
            fullscreen: true,
            keyboard: false,
            loop: false,
          }"
>
    <img src="1.jpg">
    <img src="2.jpg">
</div>

这种方法快捷方便,只需要在img标签的外层,无论是div盒子,还是其他框架的item上,直接放属性就好,属性里面的值控制什么这里就不一一排列了,大家可以根据项目需求挨个试一下

2.组件形式调用

    <viewer :images="images" :options="viewOptions">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>

data(){
    return{
        viewOptions:{
           fullscreen: true,
           keyboard: false,
           loop: false,
            //其他属性
        }
    }
}

images就是你需要展示的图片数组,options绑定的就是上述的一些属性

3.ant-design框架upload组件和viewer组件的混搭

项目的cd需求是驱赶程序员不断进步的条件

上传毕之后的图片.​​​​​​,我们就放在div中让他静静展示,需要预览,那么使用插件形式就很方便快捷,但是upload组件中的如何预览呢?

首先,我们需要在template中写入组件的代码

    <viewer :images="attachFileList" :options="viewOptions" @inited="inited" rebuild>
      <img v-show="false" v-for="(item,index) in attachFileList" :src="item.url" :key="index" />
    </viewer>

注意:img给设置了v-show=false , 这样做的原因是: 如果不设置false,那么就会出现上传组件之外的图片,我们点击上传组件,才让预览的图片展示.

methods中这两个方法必不可少:

    inited(viewer) {
      this.$viewer = viewer;
    },
    handlePreview(file) {
      for(let i in this.attachFileList){
        if(this.attachFileList[i].url == file.url){
          this.$viewer.index=i;
        }
      }
      this.$viewer.show();
    },

inited初始化,这个不不必多讲

第二个方法其实绑定的就是upload组件中点击预览的回调

这之中做了两步: 1. 获取你点击的哪个图片

2.展示预览图片

4.样式修改

viewer 就是yyds ~  但我个人还是觉得存在样式的缺陷: 比如操作按钮过小,右上角关闭按钮太靠上,偶尔会被项目中的header遮挡等

.viewer-button {
  height: 60px!important;
  width: 60px!important;
  top:65px!important;
  right:4px!important;
}
.viewer-button::before {
  bottom: 20px!important;
  left: 20px!important;
}
.viewer-toolbar > ul > li {
  height: 36px!important;
  width: 36px!important;
}
.viewer-toolbar > ul > li::before {
  margin: 8px!important;
}

自己新建一个css文件,然后在引入viewer的地方也引入这个吧 ! 

 

哒哒尅 哒哒尅 ge~