You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.8 KiB
60 lines
1.8 KiB
7 months ago
|
<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>
|