vue图片点击放大预览v-viewer

1. 安装依赖

yarn add v-viewer

2. 全局引入 main.js

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

3. 使用标签

<viewer>
    <img :src="xxx" />
</viewer>

4. 如果不生效的话

// 在上层包裹的div标签 v-viewer="{ movable: false }"

        <div class="topBox flex" v-viewer="{ movable: false }">
          <!-- 预览封面图的大图 -->
          <viewer>
            <img class="left_img" :src="book.chapterCover" />
          </viewer>
        </div>

5. dialog和v-viewer的层级显示问题

原因：elementui的dialog的z-index默认值是2000，v-viewer的z-index默认值是2015，并且每关闭一次dialog弹出层，它的index就会加2，所以按照这样的逻辑，前面的图片都能正常显示，到了第八张的时候，弹出层的z-index变为2016，此时图片显示出现问题。

解决办法：

将v-viewer的z-index的默认值设置尽量大，超出用户打开dialog次数即可。

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,//解决图片放大的层级问题
  } });