From 0fce3ef92936ea8d50a74e21f3c58c469fb1bddb Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 03 七月 2024 11:58:18 +0800
Subject: [PATCH] feat:pdf查看器
---
src/views/folder/index.vue | 44 +++++++++++++++++++++++++++++++++++++-------
1 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index 23fd948..5e40f10 100644
--- a/src/views/folder/index.vue
+++ b/src/views/folder/index.vue
@@ -50,14 +50,24 @@
</div>
</div>
- <div class="pdf-container">
+ <div class="pdf-container" v-show="pdfViewer">
<PDFViewer :pdfUrl="'/helloworld.pdf'"></PDFViewer>
+ <div class="close-btn">
+ <el-button type="danger" size="large" circle @click="closeViewer">
+ <template #icon>
+ <el-icon :size="18">
+ <Close />
+ </el-icon>
+ </template>
+ </el-button>
+ </div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
+import { Close } from '@element-plus/icons-vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
import { Search } from '@element-plus/icons-vue';
import { getFileList } from '@/api/modules/file.js';
@@ -78,15 +88,19 @@
}
},
'pdf': {
- iconPath: '/static/icons/file_type_image.png',
+ iconPath: '/static/icons/file_type_pdf.png',
handle: (item) => {
console.log(item);
+ pdfViewer.value = true;
}
},
};
+const loading = ref(false);
const searchText = ref('');
-
+const pdfViewer = ref(false);
+const imageViewer = ref(false);
+const videoViewer = ref(false);
const fileList = ref([
{
@@ -118,11 +132,16 @@
}
]);
-const loading = ref(false);
const checkRow = (item) => {
fileType[item.type] && fileType[item.type].handle(item);
};
+
+const closeViewer = () => {
+ pdfViewer.value = false;
+ imageViewer.value = false;
+ videoViewer.value = false;
+}
const getData = () => {
getFileList().then(res => {
@@ -149,12 +168,23 @@
}
.pdf-container {
- width: 800px;
- height: 800px;
+ width: 100%;
+ height: 100%;
position: absolute;
- z-index: 2;
+ z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ .close-btn {
+ position: absolute;
+ top: 2px;
+ right: 30px;
+ z-index: 9999999;
+ :deep(.el-button) {
+ width: fit-content;
+ height: fit-content;
+ padding: 5px !important;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0