增加了loading,加载成功/失败提示

src/views/hzyb/report/PreviewPDF.vue

@@ -1,28 +1,52 @@
 <script setup>
 import { useRoute } from 'vue-router';
-import { reactive, onMounted } from "vue";
+import { ref,reactive, onMounted } from "vue";
 import VuePdfEmbed from "vue-pdf-embed";
+import {Toast} from 'vant'
 const route = useRoute();
 
 const pdfSrc = route.query.pdfSrc ||''
 const pdfState = reactive({
     source:pdfSrc,
 })
+let showHint = ref(false)
+const loadingFailed = ()=>{
+    LOADING.clear()
+    Toast("加载PDF失败!")
+    showHint.value = true
+}
+const loadedPDF = ()=>{
+    LOADING.clear()
+    showHint.value = false
+}
+let LOADING
+onMounted(()=>{
+    LOADING = Toast.loading({
+        message: "正在加载PDF...",
+        duration: 0,
+        forbidClick: true,
+    });
+})
 </script>
 
 <template>
     <div class="preview-pdf-wrap">
         <template v-if="pdfState.source.length">
-            <vue-pdf-embed :source="pdfState.source"/>
+            <vue-pdf-embed :source="pdfState.source" @loading-failed="loadingFailed" @loaded="loadedPDF"/>
+            <p v-if="showHint" class="hint">获取pdf信息失败</p>
         </template>
         <template v-else>
             <div>获取pdf信息失败</div>
         </template>
-        
     </div>
 </template>
 
 <style lang="scss" scoped>
-/* .preview-pdf-wrap{
-} */
+.preview-pdf-wrap{
+    .hint{
+        margin-top:100px;
+        text-align:center;
+        color:#999;
+    }
+}
 </style>