feat : 文件预览,项目详情文件表格展示

src/components/filePreview/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="file-preview">
+    <el-dialog id="dialog" :border="false" width="1500" :style="{height: fullscreen?'':'750px;'}" top="10vh"
+               :fullscreen="fullscreen"
+               :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
+               :append-to-body="false"
+               :close-on-click-modal="true"
+    >
+      <pdf-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'pdf'"/>
+      <docx-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'docx'"/>
+      <image-preview :fileUrl="fileUrl" :fullscreen="fullscreen" :fileName="fileName" v-if="fileType === 'png'"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fileType: {
+    type: String,
+    default: ''
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+const showPreview = ref(true)
+const checkImgType=()=>{
+  if (!/\.(jpg|JPG|jpeg|png|PNG|GIF|SVG|TIFF|tiff|tif|ico|xbm|pjp)$/.test(props.fileType)) {
+    return  false;
+  }else{
+    return true;
+  }
+}
+
+</script>
+
+<style lang="scss">
+.file-preview {
+  .el-overlay-dialog {
+    left: 0 !important;
+
+  }
+
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      font-size: 30px;
+
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+}
+
+</style>