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
下载插件
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>
这样就好了！！！
