文档
Vue3图片浏览组件v-viewer,支持旋转、缩放、翻转等操作 - Mirari's Blog严重拖延症https://mirari.cc/posts/vue3-viewer
安装
npm install v-viewer --save
main 中配置
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
// npm install v-viewer --save
Vue.use(Viewer)
Viewer.setDefaults({
'inline': false, //启用inline模式
'button': false, //显示右上角关闭按钮
'navbar': true, //显示缩略图导航
'title': false, //显示当前图片的标题
'toolbar': true, //显示工具栏
'tooltip': true, //显示缩略百分比
'movable': true, //图片是否可移动
'zoomable': true, //图片是否可缩放
'rotatable': true, //图片是否可旋转
'scalable': true, //图片是否可反转
'transition': true, //使用css3过度
'fullscreen': false, //播放时是否全屏
'keyboard': true, //
})
使用
1.指令式调用(v-viewer
<div v-viewer>
<template v-for="image in images">
<img :src="image" class="image" :key="image">
</template>
</div>
2.组件式调用( <viewer>
<viewer :images="images">
<template #default="scope">
<img v-for="src in scope.images" :key="src" :src="src" class="image">
</template>
</viewer>
3.ref调用
这里是因为图片列表需要以跑马灯的形式展示,并且点击图片预览时也要是数组形式,所以通过ref方式来使用
<a-carousel :autoplay="true">
<a-carousel-slide v-for="(item, index) in images" :key="index">
<img :src="item.src" :data-original="item.src" alt="Image" @click="openViewer">
</a-carousel-slide>
</a-carousel>
<viewer v-show="false" @inited="inited" ref="viewer" :images="images">
<div v-for="(item2, index) in images" :key="index" class="frient">
<img :src="item2" />
</div>
</viewer>
inited(viewer) {
// 初始化,可获取 viewer
console.log("inited", viewer);
this.$viewer = viewer;
},
openViewer() {
this.$viewer.show();
},
遇到的问题
v-viewer图片预览插件设置setDefaults 不生效的问题
配置项main.js中
Viewer.setDefaults({
'inline': false, //启用inline模式
'button': false, //显示右上角关闭按钮
'navbar': true, //显示缩略图导航
'title': false, //显示当前图片的标题
'toolbar': true, //显示工具栏
'tooltip': true, //显示缩略百分比
'movable': true, //图片是否可移动
'zoomable': true, //图片是否可缩放
'rotatable': true, //图片是否可旋转
'scalable': true, //图片是否可反转
'transition': true, //使用css3过度
'fullscreen': false, //播放时是否全屏
'keyboard': true, //
})