86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
|
||
const visible = defineModel<boolean>({ required: true });
|
||
|
||
const props = defineProps<{
|
||
docPreviewDialogImageUrl: string;
|
||
docPreviewExcelHtml?: string;
|
||
/** pdf 使用 iframe，图片使用 img，excel 使用 table HTML */
|
||
previewKind?: "image" | "pdf" | "excel";
|
||
}>();
|
||
|
||
const kind = computed(() => props.previewKind || "image");
|
||
const dialogTitle = computed(() => {
|
||
if (kind.value === "pdf") return "PDF 预览";
|
||
if (kind.value === "excel") return "Excel 预览";
|
||
return "图片预览";
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
:title="dialogTitle"
|
||
width="80%"
|
||
append-to-body
|
||
destroy-on-close
|
||
>
|
||
<iframe
|
||
v-if="docPreviewDialogImageUrl && kind === 'pdf'"
|
||
:src="docPreviewDialogImageUrl"
|
||
title="PDF 预览"
|
||
class="doc-preview-pdf-frame"
|
||
/>
|
||
<div v-else-if="kind === 'excel'" class="doc-preview-excel-container" v-html="docPreviewExcelHtml"></div>
|
||
<div v-else-if="docPreviewDialogImageUrl" class="doc-preview-image-container">
|
||
<img
|
||
:src="docPreviewDialogImageUrl"
|
||
alt="preview"
|
||
class="doc-preview-image"
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.doc-preview-pdf-frame {
|
||
width: 100%;
|
||
height: 75vh;
|
||
border: none;
|
||
display: block;
|
||
}
|
||
.doc-preview-image-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.doc-preview-image {
|
||
max-width: 100%;
|
||
max-height: 75vh;
|
||
object-fit: contain;
|
||
}
|
||
.doc-preview-excel-container {
|
||
width: 100%;
|
||
height: 75vh;
|
||
overflow: auto;
|
||
background: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
}
|
||
.doc-preview-excel-container :deep(table) {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
.doc-preview-excel-container :deep(th),
|
||
.doc-preview-excel-container :deep(td) {
|
||
border: 1px solid #dcdfe6;
|
||
padding: 8px;
|
||
text-align: left;
|
||
}
|
||
</style>
|