vue v-viewer组件使用

v-viewer轮播图

效果图

Bandicam（录制视频）+soogif（视频转成gif）

实现效果：
轮播图+缩放、旋转照片

组件介绍

vue 预览图片研究过v-viewer及基于photoswipe的vue-photo-preview插件。
相同点：
两者都可以实现预览、放大、切换图片（轮播图效果）的功能，
差异：
1.vue-photo-preview页面效果会比v-viewer好看些；
2.vue-photo-preview虽然可以实现放大图片的功能，但是放大倍数不可进行调整，v-viewer可随意放大及缩小；
3.v-viewer另外提供旋转、翻转功能（由于拍摄的照片各种角度都有，若图片预览具有旋转功能，超加分）；

插件安装

安装

npm install v-viewer

配置main.js

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

代码实现

<template>
  <div  style="height: 500px;width: 800px;background-color: #222222">
    <viewer class="viewer" ref="viewer" :options="optionsViewer" :images="pics"
            style="width: 100%;height: 100%;background-size: contain;background-repeat: no-repeat;
                background-position: center;background-color: #3e5c9a;">
      <img v-for="(img, index) in pics" :src="img"
           :key="index" style="opacity: 0.2;display: none;width: 400px;height: 300px;background-color: #42b983;"/>
    </viewer>
  </div>

</template>

<script>
  export default {
     
    name: 'App',
    components: {
     },
    data() {
     
      return {
     
        optionsViewer: {
     
          zIndex: 99999,
          inline: true,
          button: false,
          navbar: true,
          title: false,
          toolbar: true,
          tooltip: true,
          movable: true,
          zoomable: true,
          rotatable: true,
          scalable: true,
          transition: true,
          fullscreen: false,
          keyboard: true,
          url: 'data-source'
        },
        pics: ['https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
          'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
          'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
          'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
          'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943'],
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

备注：由于多个地方用了v-viewer，但仅仅想修改部分页面的默认配置，可参考上面代码。若是作用于整个项目，可将配置添加到main.js文件。

参考：v-viewer