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="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>
|