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