hookehuyr

refactor(PdfPreview): 优化代码格式并添加加载状态

- 调整模板中的 `van-popup` 属性换行,提高代码可读性
- 添加 `loading` 状态变量,用于管理 PDF 加载状态
- 统一 CSS 样式缩进,保持代码风格一致
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
3 * @Description: PDF预览组件 3 * @Description: PDF预览组件
4 --> 4 -->
5 <template> 5 <template>
6 - <van-popup v-if="show" :show="show" @update:show="emit('update:show', $event)" position="right" :style="{ height: '100%', width: '100%' }"> 6 + <van-popup v-if="show" :show="show" @update:show="emit('update:show', $event)" position="right"
7 + :style="{ height: '100%', width: '100%' }">
7 <div id="pdf-container"></div> 8 <div id="pdf-container"></div>
8 <van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" /> 9 <van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" />
9 </van-popup> 10 </van-popup>
...@@ -32,6 +33,7 @@ const props = defineProps({ ...@@ -32,6 +33,7 @@ const props = defineProps({
32 const emit = defineEmits(['update:show']); 33 const emit = defineEmits(['update:show']);
33 34
34 // PDF Worker路径 35 // PDF Worker路径
36 +const loading = ref(false);
35 const pdfPath = new URL("@sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.js", import.meta.url).href; 37 const pdfPath = new URL("@sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.js", import.meta.url).href;
36 38
37 // 监听show属性变化 39 // 监听show属性变化
...@@ -49,9 +51,7 @@ const initPdfViewer = () => { ...@@ -49,9 +51,7 @@ const initPdfViewer = () => {
49 loadFileUrl: props.url, 51 loadFileUrl: props.url,
50 pdfPath: pdfPath, 52 pdfPath: pdfPath,
51 loading: (load, fileInfo) => { 53 loading: (load, fileInfo) => {
52 - if (!load) { 54 + loading.value = load;
53 - // configPdfApiOptions.onSearch("", false);
54 - }
55 }, 55 },
56 pdfOption: { 56 pdfOption: {
57 search: false, 57 search: false,
...@@ -76,21 +76,21 @@ const initPdfViewer = () => { ...@@ -76,21 +76,21 @@ const initPdfViewer = () => {
76 76
77 <style scoped> 77 <style scoped>
78 #pdf-container { 78 #pdf-container {
79 - width: 100%; 79 + width: 100%;
80 - padding: 0px; 80 + padding: 0px;
81 - height: 100%; 81 + height: 100%;
82 } 82 }
83 83
84 .close-btn { 84 .close-btn {
85 - position: fixed; 85 + position: fixed;
86 - right: 20px; 86 + right: 20px;
87 - bottom: 20px; 87 + bottom: 20px;
88 - z-index: 100; 88 + z-index: 100;
89 - width: 40px; 89 + width: 40px;
90 - height: 40px; 90 + height: 40px;
91 - padding: 0; 91 + padding: 0;
92 - border-radius: 50%; 92 + border-radius: 50%;
93 - background: rgba(0, 0, 0, 0.6); 93 + background: rgba(0, 0, 0, 0.6);
94 - color: #fff; 94 + color: #fff;
95 } 95 }
96 </style> 96 </style>
......