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、效果圖：