1、安装
npm install v-viewer --save
2、main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
// 如果需要修改viewer的css 可以创建一个css文件并在main.js中引入
import '@/styles/viewerEdit.css'
3、页面使用，这里需求是 支持轮播图支持大图预览
（1）页面引入
点击查看代码
import $ from "jquery";
import Viewer from "v-viewer/src/component.vue"
export default {
name: "",
components: {
Video,
Viewer
},
//避免点击上一步的时候 viewer.js 依旧没有关闭
beforeRouteLeave(to, from, next) {
this.$viewer.hide() // 关闭图片预览
}
}
（2）html代码
点击查看代码
<template>
<div>
<div class="ppt_box" v-if="type === 'f'">
// viewer使用，
<viewer :options="optionsPreview" @inited="inited" class="viewer" ref="viewer" >
<van-swipe :loop="swipePlayState==='2'?true:false" :show-indicators = 'false' :initial-swipe = 'current' @change="onChange" ref="swipe">
<van-swipe-item v-for="(item, index) in swiperList" :key="index" >
<img class="swiper_img_my" style="background-size: cover;" @click.stop="handlePreview(item, index)" :src="item.href" alt="">
</van-swipe-item>
</van-swipe>
</viewer>
// 页码
<div class="custom-indicator">{{ current + 1 }}/{{ swiperList.length }}</div>
// 上一页
<div class="left" @click.stop="handleSwipe('prev')">
<img src="@/assets/img/examList/prev.png" alt="">
</div>
// 下一页
<div class="right" @click.stop="handleSwipe('next')">
<img src="@/assets/img/examList/next.png" alt="">
</div>
</div>
// 大图预览 设置自定义按钮 主要要设置z-index 高于viewer.js 否则不显示
<div v-if="show" class="image_preview_box">
<div class="preview-indicator">{{ current + 1 }}/{{ swiperList.length }}</div>
<div class="preview_rotate" @click.stop="hanleRotate('旋转')" style="color:red">
<img src="@/assets/img/taskList/[email protected]" alt="">
</div>
<span class="preview_close" @click="hanleClose">退出全屏</span>
<div :style="{top: - (clientHdetail/2 - 28) + 'px'}" class="preview_left" @click.stop="handleSwipePreview('prev')">
<img src="@/assets/img/examList/prev.png" alt="">
</div>
<div :style="{top: - (clientHdetail/2 - 28) + 'px'}" class="preview_right" @click.stop="handleSwipePreview('next')">
<img src="@/assets/img/examList/next.png" alt="">
</div>
</div>
</div>
</template>
（3）data中代码
点击查看代码
optionsPreview: {
'inline': false, //启用inline模式
'button': false, //显示右上角关闭按钮
'navbar': false, //显示缩略图导航
'title': false, //显示当前图片的标题
'toolbar': false, //显示工具栏
'tooltip': false, //显示缩略百分比
'movable': true, //图片是否可移动
'zoomable': true, //图片是否可缩放
'rotatable': true, //图片是否可旋转
'scalable': false, //图片是否可翻转
'transition': false, //使用css3过度
'fullscreen': false, //播放时是否全屏
'keyboard': false, // 背景 启用modal背景，为单击时不会关闭模态的背景指定静态
'loop':false,
'zoomOnTouch':true,// 开启触摸缩放
hide: ((e)=>{
this.hanleClose()
console.log(e.type);
}),
view: ((e) =>{
console.log(e.type);
this.current = e.detail.index
this.rotatePre = false
this.onChange(e.detail.index)
}),
},
rotatePre:false, // 判断图片是否旋转
swiperList: [], // 轮播图数据
current: 0, // 轮播图当前索引
（4）methods数据
点击查看代码
// 初始化
inited (viewer) {
console.log(viewer);
this.$viewer = viewer
},
// 下一页
handleSwipePreview(item) {
if (item === 'prev') {
if(this.swipePlayState == '2'){
// 可以无限翻页
// 上一页
this.$viewer.prev(true);
if(this.current>0){
this.current = this.current-1
}else{
this.current=this.swiperList.length-1
}
}else{
if(this.current>0){
this.$viewer.prev(true);
this.current = this.current-1
}
}
} else if (item === 'next') {
if(this.swipePlayState == '2'){
// 下一页
this.$viewer.next(true);
if((this.current+1)<this.swiperList.length){
this.current = this.current+1
}else{
this.current = 0
}
}else{
if((this.current+1)<this.swiperList.length){
this.$viewer.next(true);
this.current = this.current+1
}
}
}
},
// 旋转
hanleRotate(type) {
console.log();
this.rotatePre = !this.rotatePre
if(this.rotatePre){
this.$viewer.rotate(90);
}else{
this.$viewer.rotate(-90);
}
},
// 退出全屏
hanleClose(){
this.$viewer.hide()
this.show = false
this.$refs.swipe.swipeTo({'index': this.currentBefore})
},
// 大图预览
handlePreview(item, index) {
this.$viewer.view(index)
this.currentBefore = index
console.log(document.getElementsByClassName('viewer-container'));
this.show = true
},
大图预览具体效果如图
