fix: 预览组件优化

gongchunyi

2 天以前 531dcd6d4c355ace4d09757fc49139402e8ae5c0

 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,
});

// 计算属性 - 判断文件类型
// 计算属性 - 判断文件类型（支持URL带查询参数）
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;
}