52b179cf4b
- 移除多个单独的 PDF 组件，整合为一个通用的 pdfView 组件 - 使用计算属性生成协议列表，提高代码可维护性 - 添加折叠面板组件，优化用户体验 - 实现拍卖笔录 PDF 的动态加载 - 优化页面布局和样式
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> |