Viewer.js实现移动端图片预览，旋转

一、viewer.js
（1）官网：中文官网
（2）参考文章
详细介绍
设置自定义按钮

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/xuanzhuan@2x.png" 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
		},

大图预览具体效果如图

详细介绍