财务订单审核详情影像预览加esc关闭

src/views/finance/modules/auditDetail.vue

@@ -1113,7 +1113,7 @@
         }
       })">关闭</el-button>
     </div>
-    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" hide-on-click-modal />
     <el-dialog :close-on-click-modal="false" title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>
@@ -1611,9 +1611,13 @@ const handleAudit = (type) => {
 
 let isShow = ref('0')
 
-// 键盘事件处理
+// 键盘事件处理(使用事件捕获,优先于 el-image-viewer 内部监听器执行)
 const handleKeydown = (event) => {
   if (event.key === 'Escape') {
+    // 如果图片预览打开中,只关闭图片,不触发页面跳转
+    if (imageShow.value) {
+      return
+    }
     myRouter.push({
       path: previousRoute.value,
       query: {
@@ -1632,13 +1636,13 @@ onMounted(() => {
   isShow.value = myRoute.query.isShow
   initDetail();
   initOption();
-  // 添加键盘事件监听器
-  window.addEventListener('keydown', handleKeydown)
+  // 添加键盘事件监听器(使用事件捕获,优先于 el-image-viewer 内部监听器执行)
+  window.addEventListener('keydown', handleKeydown, true)
 })
 
 onUnmounted(() => {
   // 移除键盘事件监听器
-  window.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('keydown', handleKeydown, true)
 })
 
 </script>
@@ -2169,4 +2173,4 @@ onUnmounted(() => {
     }
   }
 }
-</style>
+</style>