vue2使用v-viewer图片预览：打开页面自动预览，禁止关闭预览，解决在微信浏览器的页面点击事件老是触发预览初始化的问题
1、安装：
npm install v-viewer viewerjs2、在 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、效果图：
