68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="pdf-container">
|
||
|
|
<client-only>
|
||
|
|
<div v-if="loading" class="loading-container">
|
||
|
|
<van-loading type="spinner" size="24px">加载中...</van-loading>
|
||
|
|
</div>
|
||
|
|
<VuePdfEmbed
|
||
|
|
v-if="pdfUrl"
|
||
|
|
:source="pdfUrl"
|
||
|
|
@rendered="handleRendered"
|
||
|
|
/>
|
||
|
|
</client-only>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import VuePdfEmbed from 'vue-pdf-embed'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
pdfName: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'local', // 'local' 或 'remote'
|
||
|
|
},
|
||
|
|
isActive: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const loading = ref(true)
|
||
|
|
const pdfUrl = computed(() => {
|
||
|
|
if (!props.pdfName) return ''
|
||
|
|
return props.type === 'local' ? `/pdfs/${props.pdfName}.pdf` : props.pdfName
|
||
|
|
})
|
||
|
|
|
||
|
|
watch(() => props.isActive, (newVal) => {
|
||
|
|
if (newVal) {
|
||
|
|
loading.value = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleRendered = () => {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.pdf-container {
|
||
|
|
position: relative;
|
||
|
|
min-height: 200px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(embed) {
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
</style>
|