v-viewer自定义使用指南

2020-12-07

v-viewer自定义使用

v-viewer简介

用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。
API文档中文文档
需求如下：

点击按钮进入v-viewer预览模式

点击图片进入v-viewer预览模式

自定义v-viewer中的toolbar工具栏按钮，使得可以对自带按钮进行监听和增加自定义按钮
本demo基于 vue 2.x

一、安装

使用 npm 命令安装

npm install v-viewer

二、引入

可以选择全局引入（在main.js）或局部引入，这里以局部引入为例：

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

三、使用

这里都以指令方式使用为例

1.button进入

引入viewer后，就可以愉快的开始使用了，

这里先以点击按钮进入viewer为例：

第一步：创建按钮

<el-button type="primary" @click="show">大图模式</el-button>

第二步：设置需要被viewer处理的图片

设置隐藏标签，仅供点击按钮使用，平常看不见：

设置v-viewer后，该元素下的所有img元素都会被viewer自动处理

<!-- 隐藏 大图模式使用 设置v-viewer后，该元素下的所有img元素都会被viewer自动处理 -->
<div class="images" id="image" v-viewer v-show="false">
    <div v-for="photo in pictures" data-photoid="photo.photoId">
      <img :src="photo.response.url" >
    </div>
</div>

第三步：配置viewer默认按钮以及按钮监听（核心）

在export外部

<script>
//.... 这里需要引入viewer 参见上面
// 配置viewer可以见文章开头的github🔗
Viewer.setDefaults({
  zIndex: 1000,
  toolbar: {
    zoomIn: 1,
    zoomOut: 1,
    oneToOne: 1,
    rotateLeft: 1,
    rotateRight: 1,
    flipHorizontal: 1,
    reset: 1,
    prev: {
      show: 1,
      // 上一张点击事件
      click: () => {
        vm.handleViewerPrev()
      }
    },
    next: {
      show: 1,
      // 下一张点击事件
      click: () => {
        vm.handleViewerNext()
      }
    },
    // 自定义方法
    score() {
      // 在里面可以进行业务逻辑处理 这里省略方法实现
      if (!vm.viewerScoreStatus) {
        vm.handleViewerAddScore()
      } else {
        vm.handleViewerCancelScore()
      }
    }
  }
})

// 在created方法中设置vm=this 以此让export外的方法可以调用export内的方法
let vm = null

</script>

export内的方法：

重点：获取viewer当前显示的图片下标

const viewer = this.$el.querySelector('.images').$viewer let index = viewer.index

// 展示大图按钮方法
show (index) {
  // 获取隐藏标签的viewer对象
  const viewer = this.$el.querySelector('.images').$viewer
  // 更改toolbar图标
  viewer.toolbar.firstChild.lastChild.style.backgroundImage = 'url('xxxxx')'
  viewer.toolbar.firstChild.lastChild.style.width = '52px'
  viewer.toolbar.firstChild.lastChild.style.height = '51px'
  viewer.toolbar.firstChild.lastChild.style.title = '打分'

  // 遍历修改按钮尺寸
  let size =  9
  for (let i = 0; i < size; i++) {
    viewer.toolbar.children[0].firstChild.parentElement.children[i].style.width = '52px'
    viewer.toolbar.children[0].firstChild.parentElement.children[i].style.height = '51px'
    viewer.toolbar.children[0].firstChild.parentElement.children[i].style.padding = '13px'
  }

	// 使用view方法指定进入的第一张图片
  if (this.pictures[index] == undefined) {
    viewer.view(0)
    this.handleViewerScoreStatus(this.pictures[0].photoId)
    this.viewerPhotoId = this.pictures[0].photoId
  } else {
    this.handleViewerScoreStatus(this.pictures[index].photoId)
    this.viewerPhotoId = this.pictures[index].photoId
    viewer.view(index)
  }
  // 打开viewer
  viewer.show()
},
  
// viewer 上一张监听
handleViewerPrev() {
  	// 获取到实例，并可以通过实例的index属性获取当前显示图片的index下标
    const viewer = this.$el.querySelector('.images').$viewer
    let index = viewer.index
    // 手动实现图片上一张切换
    viewer.view(index - 1)

    // 打分按钮处理
    const photoId = this.pictures[viewer.index].photoId
    this.viewerPhotoId = photoId
    this.handleViewerScoreStatus(photoId)
},
// viewer 下一张监听
handleViewerNext() {
    const viewer = this.$el.querySelector('.images').$viewer
    let index = viewer.index
    // 手动实现图片下一张切换
    viewer.view(index + 1)

    // 打分按钮处理
    const photoId = this.pictures[viewer.index].photoId
    this.viewerPhotoId = photoId
    this.handleViewerScoreStatus(photoId)
}

2.点击img进入

通过这种方式，点击图片后会自动进入viewer预览界面，而无需任何处理，工具栏按钮的自定义与监听方法与第一种方式相同。

<!-- 隐藏 大图模式使用 设置v-viewer后，该元素下的所有img元素都会被viewer自动处理 -->
<div class="images" id="image" v-viewer >
    <div v-for="photo in pictures" data-photoid="photo.photoId">
      <img :src="photo.response.url" >
    </div>
</div>