博客

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的配置下面有一张表，可以参考一下：

以上配置完成之后 就可以在所需要的的页面中直接使用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,//解决图片放大的层级问题
  } });