vue使用v-viewer组件之v-viewer轮播图

1.实现效果
轮播图+缩放、旋转照片
2.插件安装

npm install v-viewer

3.配置main.js

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

4.代码实现

<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>

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