79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
||
<div class="file-preview">
|
||
<el-dialog id="dialog" :border="false" width="1200" :style="{height: fullscreen?'':'650px;'}" top="10vh"
|
||
:fullscreen="fullscreen"
|
||
:title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
|
||
:append-to-body="false"
|
||
:close-on-click-modal="true"
|
||
>
|
||
<!-- <ppt-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'ppt'||fileType === 'pptx'"/>-->
|
||
<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="checkImgType(fileType)"/>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ElNotification} from "element-plus";
|
||
|
||
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)
|
||
// console.info("🚀 ~method:fileType -----", props.fileType)
|
||
|
||
const checkImgType=(fileType)=>{
|
||
return fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg' || fileType == 'ico' || fileType == 'PNG' || fileType == 'JPG';
|
||
}
|
||
// console.info("🚀 ~method:‘checkImgType(props.fileType) -----", checkImgType(props.fileType))
|
||
if(props.fileType!=='pdf'&&props.fileType!=='docx'&&!checkImgType(props.fileType)){
|
||
showPreview.value=false
|
||
ElNotification({
|
||
title: '提示',
|
||
message: props.fileName+' 文件不支持预览！',
|
||
type: 'error'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.file-preview {
|
||
.el-overlay-dialog {
|
||
left: 0 !important;
|
||
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
.el-dialog__close {
|
||
font-size: 30px;
|
||
|
||
}
|
||
}
|
||
|
||
.el-dialog__body {
|
||
overflow: hidden;
|
||
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
</style>
|