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

时间:2023-03-20 长安依旧人气:0

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

补充：v-viewer的使用（vue）

下载插件

npm install v-viewer --save

在需要使用的页面进行导入

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

在定义一个div用来存放img

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

这样就好了！！！

加载全部内容