vue v-viewer组件使用示例详解(v-viewer轮播图)
作者：长安依旧
这篇文章主要介绍了vue v-viewer组件使用示例详解(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">
<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>
这样就好了！！！
到此这篇关于vue v-viewer组件使用的文章就介绍到这了,更多相关vue v-viewer组件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！