68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<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="checkImgType(fileType)"/>
|
|
</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=(fileType)=>{
|
|
if(fileType=='png'||fileType=='jpg'||fileType=='jpeg'||fileType=='ico'||fileType=='PNG'||fileType=='JPG'){
|
|
return true
|
|
}else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
</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>
|