From 531dcd6d4c355ace4d09757fc49139402e8ae5c0 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期三, 26 八月 2026 14:32:09 +0800
Subject: [PATCH] fix: 预览组件优化
---
src/components/filePreview/index.vue | 30 ++++++++++++++++++++----------
1 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/src/components/filePreview/index.vue b/src/components/filePreview/index.vue
index cda5b56..cd29fbc 100644
--- a/src/components/filePreview/index.vue
+++ b/src/components/filePreview/index.vue
@@ -1,8 +1,8 @@
<template>
- <el-dialog v-model="dialogVisible" title="棰勮" width="100%" fullscreen align-center :before-close="handleClose" append-to-body>
+ <el-dialog v-model="dialogVisible" title="棰勮" :width="isImage ? '60%' : '100%'" :fullscreen="!isImage" align-center :before-close="handleClose" append-to-body>
<div>
<!-- 鍥剧墖棰勮 -->
- <div v-if="isImage">
+ <div v-if="isImage" class="image-preview-container">
<img :src="imgUrl" alt="Image Preview" />
</div>
@@ -78,9 +78,9 @@
transformData: (workbookData) => workbookData,
});
-// 璁＄畻灞炴�� - 鍒ゆ柇鏂囦欢绫诲瀷
+// 璁＄畻灞炴�� - 鍒ゆ柇鏂囦欢绫诲瀷锛堟敮鎸乁RL甯︽煡璇㈠弬鏁帮級
const isImage = computed(() => {
- const state = /\.(jpg|jpeg|png|gif)$/i.test(fileUrl.value);
+ const state = /\.(jpg|jpeg|png|gif)(\?.*)?$/i.test(fileUrl.value);
if (state) {
imgUrl.value = fileUrl.value.replaceAll('word', 'img');
}
@@ -89,23 +89,23 @@
const isPdf = computed(() => {
console.log(fileUrl.value)
- return /\.pdf$/i.test(fileUrl.value);
+ return /\.pdf(\?.*)?$/i.test(fileUrl.value);
});
const isDoc = computed(() => {
- return /\.(doc|docx)$/i.test(fileUrl.value);
+ return /\.(doc|docx)(\?.*)?$/i.test(fileUrl.value);
});
const isXls = computed(() => {
- const state = /\.(xls|xlsx)$/i.test(fileUrl.value);
+ const state = /\.(xls|xlsx)(\?.*)?$/i.test(fileUrl.value);
if (state) {
- options.value.xls = /\.(xls)$/i.test(fileUrl.value);
+ options.value.xls = /\.(xls)(\?.*)?$/i.test(fileUrl.value);
}
return state;
});
const isZipOrRar = computed(() => {
- return /\.(zip|rar)$/i.test(fileUrl.value);
+ return /\.(zip|rar)(\?.*)?$/i.test(fileUrl.value);
});
const isSupported = computed(() => {
@@ -164,7 +164,7 @@
};
const open = (url) => {
- fileUrl.value = window.location.protocol+'//'+window.location.host+ url;
+ fileUrl.value = url;
dialogVisible.value = true;
};
const handleClose = () => {
@@ -188,8 +188,18 @@
</script>
<style scoped>
+.image-preview-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ max-height: calc(100vh - 200px);
+ width: 100%;
+}
+
img {
max-width: 100%;
+ max-height: calc(100vh - 200px);
+ object-fit: contain;
display: block;
margin: 0 auto;
}
--
Gitblit v1.9.3