vue v-viewer组件使用示例详解(v-viewer轮播图)

npm install v-viewer

  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>

npm install v-viewer --save

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

<div v-viewer>
      <img />
</div>