vue实现图片预览的放大以及缩小（viewer.js）

viewer.js

viewer.js是一款开源的图片预览插件，功能十分强大:
支持移动设备触摸事件、响应式、放大/缩小、旋转（类似微博的图片旋转）、水平/垂直翻转、图片移动（拖拽）、全屏幻灯片模式（可做屏保）、缩略图 以及多种自定义事件

在vue项目中如何使用viewer.js

1. 安装依赖：

npm i v-viewer --save

2. 在全局main.js文件中注册以及引用css样式：

//导入图片预览viewer组件以及css
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
// setDeafaults配置
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
})

关于viewerjs中setDeafaults的配置下面有一张表，可以参考一下：

名称	默认值	说明
inline	false	启用inline模式
button	true	显示右上角关闭按钮
navbar	true	显示缩略图导航
title	true	显示当前图片的标题
toolbar	true	显示工具栏
tooltip	true	显示缩放百分比
movable	true	是否可移动
movable	true	是否可缩放
rotatable	true	是否可旋转
scalable	true	是否可翻转
transition	true	使用css3过度
fullscreen	true	播放时是否全屏
keyboard	true	是否支持键盘
url	src	设置大图片的url

以上配置完成之后 就可以在所需要的的页面中直接使用viewer.js,具体代码如下：

1.单页面单独使用

1).xxx.vue页面
// 图片绑定点击事件
<el-image :src="detail.hzsy" @click="openDialog(detail.hzsy)"></el-image>
2).点击图片弹出预览
<el-dialog title="图像预览" :visible.sync="tpDialogVisible" width="700px" height="300px" style="z-index:0;"> 
  <viewer :images="urlList">
    <img
      v-for="(src,index) in urlList"
      :src="src"
      :key="index"
       style="width: 200px; height: 200px; margin-left: 35%"
    />
  </viewer>
</el-dialog>
3).data数据项：
data(){
	return{
	  tpDialogVisible:false,
      urlList:[],
	}
}
4).method点击图片事件：
methods:{
    // 点击详情图片放大功能
    openDialog(url){
      this.urlList.length=0
      this.urlList.push(url)
      this.tpDialogVisible=true
    },
}

2.封装成公用组件
A…在components（公共组件）文件下新建一个文件夹,再新建一个以xxx.vue文件

子页面----公共组件
<template>
  <div class="content">
    <viewer :images="urlList">
      <img
        v-for="src in urlList"
        :src="src"
        :key="src"
      />
    </viewer>
  </div>
</template>
 
<script>
export default {
  props: {
    urlList: {
      type: Array,
      default: [],
    },
  },
  mounted() {},
  data() {
    return {};
  },
};
</script>

B.在此已经全局注册过了，可以直接使用标签 然后这个作为子组件。viewer绑定的一定要为数组，不然是会报错的（避坑）。当这些都准备好的就可以在“父页面”使用了。在父页面不要忘了引用以及注册。

父页面
1).引入组件
import viewer from "../../../components/viewer.vue";
export default {
  components: { viewer },
}
2).按需引入组件
<el-image :src="detail.hzsy" @click="openDialog(detail.hzsy)"></el-image>
<el-dialog title="图像预览" :visible.sync="tpDialogVisible" width="700px" height="300px" style="z-index:0;"> 
	<viewer :urlList="urlList"></viewer>
</el-dialog>
3).data数据项
data(){
	return{
	  tpDialogVisible:false,
      urlList:[],
	}
}
4).method点击图片事件：
methods:{
    // 点击详情图片放大功能
    openDialog(url){
      this.urlList.length=0
      this.urlList.push(url)
      this.tpDialogVisible=true
    },
}

注意：

有时使用v-viewer插件图片预览图片在弹出层后面：
原因：elementui的dialog的z-index默认值是2000，v-viewer的z-index默认值是2015，并且每关闭一次dialog弹出层，它的index就会加
所以按照这样的逻辑，前面的图片都能正常显示，到了第八张的时候，弹出层的z-index变为2016，此时图片显示出现问题
解决办法：
将v-viewer的z-index的默认值设置尽量大，超出用户打开dialog次数即可。

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,//解决图片放大的层级问题
  } });