zhaoxuebing
7 months ago
11 changed files with 304 additions and 10 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="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