Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

• 之前用过viewer.js，算是市场上用过最全面的图片预览。
• v-viewer，是基于viewer.js的一个图片浏览的Vue组件，支持旋转、缩放、翻转等操作。

基本使用

安装：npm安装

npm install v-viewer

目录结构如下

注册并使用

引入v-viewer及必需的css样式，并使用Vue.use()注册插件，之后即可使用。

• import 'viewerjs/dist/viewer.css'：引入必需的css样式，详见上目录。
• import VueViewer from 'v-viewer'：引入v-viewer
• Vue.use(VueViewer) ：使用Vue.use()注册插件

<template>
  <div>
    <viewer :images="images">
    <!-- style="width: 100px; height: 100px" 这是指定缩略图大小-->
      <img v-for="(src,index) in images" :key="index" :src="src" style="width: 100px; height: 100px" @click="show(index)">
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(VueViewer)
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      show(index) {
        this.$viewerApi({
          images: this.images,
          options: {
          	initialViewIndex: index,
       	  },
        })
      },
    },
  }
</script>

预览时，如何打开指定图片

主要取决于this.$viewerApi所传参数对象：ViewerApiOptions

this.$viewerApi({
  images: this.images,
  options: {
  	initialViewIndex: index,
  },
})

ViewerApiOptions分析

export interface ViewerApiOptions {
   images: Array<string | object>
   options?: ViewerJs.Options
 }

• images：图片列表（必填）
• options：参考ViewerJs.Options的参数👇（非必填，如果包含，它的类型必须是 ViewerJs.Options）

ViewerJs.Options分析

export interface Options {
    backdrop?: boolean | string; // 是否显示遮罩层，以及遮罩层的颜色或图片
    button?: boolean; // 是否显示右上角的关闭按钮
    className?: string; // 给查看器容器添加自定义类名
    container?: string | HTMLElement; // 查看器的容器，可以是选择器字符串或HTMLElement对象
    filter?: Function; // 图片过滤函数，用于筛选需要显示的图片
    fullscreen?: boolean | FullscreenOptions; // 是否启用全屏模式及全屏选项
    focus?: boolean; // 是否在查看时将焦点锁定在查看器上
    hidden?(event: CustomEvent): void; // 查看器隐藏后的回调函数
    hide?(event: CustomEvent): void; // 查看器开始隐藏时的回调函数
    inheritedAttributes?: string[]; // 定义哪些图片属性应被查看器继承
    initialCoverage?: number; // 图片初始覆盖率，决定图片初始显示的大小
    initialViewIndex?: number; // 初始查看图片的索引
    inline?: boolean; // 是否以内联方式（而不是模态方式）显示查看器
    interval?: number; // 幻灯片播放时每张图片的停留时间
    keyboard?: boolean; // 是否允许键盘控制
    loading?: boolean; // 是否显示加载提示
    loop?: boolean; // 在最后一张图片后是否循环到第一张图片
    maxZoomRatio?: number; // 允许的最大缩放比例
    minHeight?: number; // 图片的最小高度
    minWidth?: number; // 图片的最小宽度
    minZoomRatio?: number; // 允许的最小缩放比例
    movable?: boolean; // 图片是否可拖动
    move?(event: MoveEvent): void; // 图片移动时的回调函数
    moved?(event: MovedEvent): void; // 图片移动结束时的回调函数
    navbar?: boolean | Visibility; // 是否显示导航栏
    play?(event: CustomEvent): void; // 点击播放按钮时的回调函数
    ready?(event: CustomEvent): void; // 查看器准备就绪时的回调函数
    rotatable?: boolean; // 图片是否可旋转
    rotate?(event: RotateEvent): void; // 图片旋转时的回调函数
    rotated?(event: RotatedEvent): void; // 图片旋转结束时的回调函数
    scalable?: boolean; // 图片是否可缩放
    scale?(event: ScaleEvent): void; // 图片缩放时的回调函数
    scaled?(event: ScaledEvent): void; // 图片缩放结束时的回调函数
    show?(event: CustomEvent): void; // 查看器开始显示时的回调函数
    shown?(event: CustomEvent): void; // 查看器显示后的回调函数
    slideOnTouch?: boolean; // 是否允许触摸滑动切换图片
    stop?(event: CustomEvent): void; // 停止播放时的回调函数
    title?: boolean | Visibility | Function | [Visibility, Function]; // 图片标题的显示方式和内容
    toggleOnDblclick?: boolean; // 是否允许双击切换图片的缩放状态
    toolbar?: boolean | Visibility | ToolbarOptions; // 工具栏的显示方式和选项
    tooltip?: boolean; // 是否显示工具提示
    transition?: boolean; // 是否使用 CSS 过渡效果
    url?: string | Function; // 定义如何从图片元素获取大图的 URL
    view?(event: CustomEvent): void; // 开始查看某张图片时的回调函数
    viewed?(event: CustomEvent): void; // 查看某张图片结束时的回调函数
    zIndex?: number; // 查看器的 z-index 值
    zIndexInline?: number; // 内联查看器的 z-index 值
    zoom?(event: ZoomEvent): void; // 图片缩放时的回调函数
    zoomOnTouch?: boolean; // 是否允许触摸缩放图片
    zoomOnWheel?: boolean; // 是否允许鼠标滚轮缩放图片
    zoomRatio?: number; // 缩放比例的步进值
    zoomable?: boolean; // 图片是否可缩放
    zoomed?(event: ZoomedEvent): void; // 图片缩放结束时的回调函数
}

字段较多，并未一一进行尝试实践，可自行学习，这里initialViewIndex决定初始索引。

• initialViewIndex：初始查看图片的索引

解决v-viewer和element-ui的弹出层冲突问题

在弹出层打开v-viewer被覆盖

• elementui的dialog的z-index默认是2000
• v-viewer的z-index默认是2015
• 每关闭一次dialog弹出层，它的index就会加2

解决方案：把viewer插件的zindex默认值调大

this.$viewerApi({
  images: this.images,
  options: {
  	initialViewIndex: index,
  	zindex: 9999,
  },
})

其他方案：把element-ui弹出层的z-index默认值调小。

import elementui from 'element-ui'
Vue.use(elementui, { zIndex: 1000 })