feat(Pdf预览): 添加PDF加载状态处理和加载指示器

在PdfPreview组件中添加加载状态处理和加载指示器，通过@onLoad事件通知父组件加载状态

@@ -7,6 +7,11 @@
         :style="{ height: '100%', width: '100%' }">
         :style="{ height: '100%', width: '100%' }">
         <div id="pdf-container"></div>
         <div id="pdf-container"></div>
         <van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" />
         <van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" />
+        <van-overlay :show="loading">
+            <div class="wrapper" @click.stop>
+                <van-loading vertical color="#FFFFFF">加载中...</van-loading>
+            </div>
+        </van-overlay>
     </van-popup>
     </van-popup>
 </template>
 </template>
 
 
@@ -30,15 +35,16 @@ const props = defineProps({
     }
     }
 });
 });
 
 
-const emit = defineEmits(['update:show']);
+const emit = defineEmits(['update:show', 'onLoad']);
 
 
 // PDF Worker路径
 // PDF Worker路径
-const loading = ref(false);
+const loading = ref(true);
 const pdfPath = new URL("@sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.js", import.meta.url).href;
 const pdfPath = new URL("@sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.js", import.meta.url).href;
 
 
 // 监听show属性变化
 // 监听show属性变化
 watch(() => props.show, (newVal) => {
 watch(() => props.show, (newVal) => {
     if (newVal && props.url) {
     if (newVal && props.url) {
+        loading.value = true;
         initPdfViewer();
         initPdfViewer();
     }
     }
 });
 });
@@ -52,6 +58,7 @@ const initPdfViewer = () => {
             pdfPath: pdfPath,
             pdfPath: pdfPath,
             loading: (load, fileInfo) => {
             loading: (load, fileInfo) => {
                 loading.value = load;
                 loading.value = load;
+                emit('onLoad', false);
             },
             },
             pdfOption: {
             pdfOption: {
                 search: false,
                 search: false,
@@ -98,4 +105,11 @@ const initPdfViewer = () => {
     background: rgba(0, 0, 0, 0.6);
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     color: #fff;
 }
 }
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
 </style>
 </style>

@@ -238,7 +238,7 @@
         </van-popup>
         </van-popup>
 
 
         <!-- PDF预览 -->
         <!-- PDF预览 -->
-        <PdfPreview v-model:show="pdfShow" :url="pdfUrl" :title="pdfTitle" />
+        <PdfPreview v-model:show="pdfShow" :url="pdfUrl" :title="pdfTitle" @onLoad="onPdfLoad" />
     </div>
     </div>
 </template>
 </template>
 
 
@@ -416,6 +416,10 @@ const showPdf = ({ title, url, meta_id }) => {
     addRecord(paramsObj);
     addRecord(paramsObj);
 };
 };
 
 
+const onPdfLoad = (load) => {
+    // console.warn('pdf加载状态', load);
+};
+
 const courseId = computed(() => {
 const courseId = computed(() => {
     return route.params.id || '';
     return route.params.id || '';
 });
 });