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