v-viewer图片预览插件 遇到的bug 以及使用

文档

Vue3图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog严重拖延症https://mirari.cc/posts/vue3-viewer

安装

npm install v-viewer --save

main 中配置

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
// npm install v-viewer --save
Vue.use(Viewer)
Viewer.setDefaults({
  'inline': false, //启用inline模式
  'button': false, //显示右上角关闭按钮
  'navbar': true, //显示缩略图导航
  'title': false, //显示当前图片的标题
  'toolbar': true, //显示工具栏
  'tooltip': true, //显示缩略百分比
  'movable': true, //图片是否可移动
  'zoomable': true, //图片是否可缩放
  'rotatable': true, //图片是否可旋转
  'scalable': true, //图片是否可反转
  'transition': true, //使用css3过度
  'fullscreen': false, //播放时是否全屏
  'keyboard': true, //
})

使用

1.指令式调用（v-viewer

<div v-viewer>
    <template v-for="image in images">
      <img :src="image" class="image" :key="image">
    </template>
  </div>

2.组件式调用（ <viewer>

 <viewer :images="images">
    <template #default="scope">
      <img v-for="src in scope.images" :key="src" :src="src" class="image">
    </template>
  </viewer>

3.ref调用

这里是因为图片列表需要以跑马灯的形式展示，并且点击图片预览时也要是数组形式，所以通过ref方式来使用

<a-carousel :autoplay="true">
      <a-carousel-slide v-for="(item, index) in images" :key="index">
        <img :src="item.src" :data-original="item.src" alt="Image" @click="openViewer">
      </a-carousel-slide>
    </a-carousel>


<viewer v-show="false" @inited="inited" ref="viewer" :images="images">
  <div v-for="(item2, index) in images" :key="index" class="frient">
    <img :src="item2" />
  </div>
</viewer>

inited(viewer) {
      // 初始化，可获取 viewer
      console.log("inited", viewer);
      this.$viewer = viewer;
    },
    openViewer() {
      this.$viewer.show();
    },

遇到的问题

v-viewer图片预览插件设置setDefaults 不生效的问题

配置项main.js中

Viewer.setDefaults({
  'inline': false, //启用inline模式
  'button': false, //显示右上角关闭按钮
  'navbar': true, //显示缩略图导航
  'title': false, //显示当前图片的标题
  'toolbar': true, //显示工具栏
  'tooltip': true, //显示缩略百分比
  'movable': true, //图片是否可移动
  'zoomable': true, //图片是否可缩放
  'rotatable': true, //图片是否可旋转
  'scalable': true, //图片是否可反转
  'transition': true, //使用css3过度
  'fullscreen': false, //播放时是否全屏
  'keyboard': true, //
})