refactor(PdfPreview): 优化代码格式并添加加载状态
- 调整模板中的 `van-popup` 属性换行,提高代码可读性 - 添加 `loading` 状态变量,用于管理 PDF 加载状态 - 统一 CSS 样式缩进,保持代码风格一致
Showing
1 changed file
with
4 additions
and
4 deletions
| ... | @@ -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, | ... | ... |
-
Please register or login to post a comment