vue2使用v-viewer图片预览：打开页面自动预览，禁止关闭预览，解决在微信浏览器的页面点击事件老是触发预览初始化的问题

1、安装：

复制代码

npm install v-viewer viewerjs

2、在 main.js 中全局注册：

复制代码

import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer );
//配置项（可选，根据需求调整）
// Vue.use(Viewer, {
//   defaultOptions: {
//     zIndex: 9999, // 预览弹窗层级
//     // toolbar: true, // 是否显示工具栏（缩放、旋转等按钮）
//     toolbar: false, // 是否显示工具栏（缩放、旋转等按钮）
//     navbar: true, // 可选：同时隐藏底部缩略图导航
//     title: false, // 可选：隐藏标题栏
//     clickToClose: false, // 禁止点击阴影处关闭预览
//     zoomRatio: 0.1, // 每次缩放的比例
//     minZoomRatio: 0.1, // 最小缩放比例
//     maxZoomRatio: 10, // 最大缩放比例
//     toggleOnDblclick: false, // 双击是否切换缩放状态
//     // 更多配置参考：https://github.com/fengyuanchen/viewerjs#options
//   }
// });

3、使用：解决在微信浏览器的页面点击事件老是触发预览初始化的问题

文档：https://mirari.cc/posts/v-viewer

复制代码

<template>
  <div id="PDA_PP">
    <div class="navbar" @click.stop>
      <i class="el-icon-arrow-left"></i>
      <span>用心软件</span>
      <i class="el-icon-more" @click="bottomDrawer"></i>
    </div>
    <div class="viewer" ref="imgContainer" v-viewer.static="viewerOptions">
      <img class="image" v-for="(item, index) in srcList" :key="index" :src="item">
    </div>

    <el-drawer :with-header="false" :visible.sync="drawer" direction="btt" custom-class="btt-custom-drawer" :before-close="handleClose">
      <el-button plain class="el-drawer-item">设为默认</el-button>
      <el-button plain class="el-drawer-item">删除图片</el-button>
      <el-button plain class="el-drawer-item">手机拍照</el-button>
      <el-button plain class="el-drawer-item">从手机相册选择</el-button>
      <el-button plain class="el-drawer-item" @click="handleClose">取消</el-button>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgdata: [
        { id: 0, pjname: '大灯', pjcode: '33101', url: 'http://gzyxdoc.oss-cn-shenzhen.aliyuncs.com/doc/2025/04/d9d60e4f7bc8f5737c282a388e73eedd.png' },
        { id: 1, pjname: '大灯', pjcode: '33101', url: 'http://gzyxdoc.oss-cn-shenzhen.aliyuncs.com/doc/2025/04/a99c2e5b3121012cddef0bbbcb1153ee.png' },
        { id: 2, pjname: '大灯', pjcode: '33101', url: 'http://gzyxdoc.oss-cn-shenzhen.aliyuncs.com/doc/2025/06/ee3e8506953f3f3c9f4f014342e66071image/png' },
      ],
      srcList: [],
      viewerOptions: {
        className: 'mobile-custom-viewer',
        zIndex: 999,
        inline: false,
        toolbar: false,
        navbar: true,
        title: false,
        button: false,
        backdrop: 'static',//禁止点击阴影关闭预览
        hide: function () {
          return true
        },
      },
      mIndex: 1,
      mItemInfo: {},
      drawer: false,
    }
  },
  created() {
    this.imgdata.forEach((item, index) => {
      this.srcList.push(item.url)
    });

  },
  mounted() {
    setTimeout(() => {
      const viewer = this.$refs.imgContainer.$viewer;
      console.log(viewer)
      if (viewer) viewer.show();
      this.update_mindex(this.mIndex);
    }, 100);
  },
  methods: {
    update_mindex(index) {
      const viewer = this.$refs.imgContainer.$viewer;
      if (viewer) viewer.view(index);
    },
    getCurrentIndex() {
      const viewer = this.$refs.imgContainer.$viewer;
      if (viewer) {
        console.log('当前显示的是第', viewer.index, '张图片')
        this.mIndex = viewer.index;
        this.mItemInfo = this.imgdata[this.mIndex];
        console.log(this.mItemInfo)
      }
    },
    bottomDrawer() {
      this.drawer = true;
      this.getCurrentIndex()
    },
    handleClose() {
      this.drawer = false;
    },

  },
}
</script>
<style lang="">
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
#PDA_PP {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.navbar {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  font-size: 18px;
  border-bottom: 1px solid #5c5c5c;
  position: relative;
  z-index: 1002;
  background: #000;
}
.navbar > i {
  padding: 10px 15px;
}
.viewer {
  display: flex;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
  display: none;
}
.image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.mobile-custom-viewer .viewer-navbar {
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.btt-custom-drawer {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: auto !important;
}
.btt-custom-drawer .el-drawer__body .el-drawer-item {
  display: block;
  width: 100%;
  font-size: 16px;
  color: #000;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  border-top: 1px solid #f7f7f7;
  font-family: 微软雅黑;
  background: #fff;
}
.btt-custom-drawer .el-drawer__body .el-drawer-item:hover {
  background: #fff;
}
.btt-custom-drawer .el-drawer__body .el-drawer-item:disabled {
  color: #999;
}
.btt-custom-drawer .el-drawer__body .el-drawer-item:first-child {
  border-top: 0;
}
.btt-custom-drawer .el-drawer__body .el-drawer-item:last-child {
  border-width: 4px;
}
</style>

4、效果图：