yufei0306
6 months ago
5 changed files with 128 additions and 6 deletions
@ -0,0 +1,60 @@ |
|||||
|
<template> |
||||
|
<el-dialog class="preview" v-model="showDialog" style="" @close="closeView"> |
||||
|
<iframe v-if="isPDF" ref="pdfRef" width="100%" :height="frameHeight" :src="pdfUrl" frameborder="0"></iframe> |
||||
|
<el-carousel justify="center" v-else indicator-position="outside"> |
||||
|
<el-carousel-item class="carousel-item" v-for="url in imageArray" :key="url"> |
||||
|
<el-image style="border:1px solid red;height:100%" fit="contain" :src="url" loading="lazy" /> |
||||
|
</el-carousel-item> |
||||
|
</el-carousel> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue' |
||||
|
const showDialog = ref(false) // 弹窗控制 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const isPDF = ref(false) // 是否是pdf |
||||
|
const pdfUrl = ref<string>('') // pdf地址 |
||||
|
const pdfRef = ref() // pdf组件 |
||||
|
const frameHeight = ref(0) |
||||
|
const imageArray = ref<string[]>([]) // 图片数组 |
||||
|
const closeView = () => { |
||||
|
showDialog.value = false |
||||
|
} |
||||
|
// 打开预览 |
||||
|
const openPreview = async (data:string[]|string)=>{ |
||||
|
showDialog.value = true |
||||
|
if(Array.isArray(data)){ |
||||
|
//图片数组 |
||||
|
isPDF.value = false |
||||
|
pdfUrl.value = '' |
||||
|
imageArray.value = data.filter(item=>(item.replace('/get/','/show/'))) |
||||
|
}else{ |
||||
|
isPDF.value = true |
||||
|
pdfUrl.value = data.replace('/get/','/show/') |
||||
|
nextTick(()=>{ |
||||
|
frameHeight.value = window.innerHeight - 2*pdfRef.value.getBoundingClientRect().top |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
defineExpose({openPreview}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
/* .preview .el-dialog__headerbtn .el-dialog__close{ |
||||
|
color: white !important; |
||||
|
font-size: 20px !important; |
||||
|
} |
||||
|
.preview.el-dialog { |
||||
|
--el-dialog-box-shadow:null; |
||||
|
} */ |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.carousel-item{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
</style> |
Loading…
Reference in new issue