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

src/views/report/PreviewPDF.vue

@@ -1,25 +1,53 @@
 <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 { ElMessage, ElLoading } from 'element-plus'
 const route = useRoute();
 
-const pdfSrc = route.query.pdfSrc ||'https://hzstatic.hzinsights.com/static/yb/pdf/debug/AoCnwUM9cUvnSeHwpz0bUNOJ7JA4.pdf'
+const pdfSrc = route.query.pdfSrc ||''
 const pdfState = reactive({
     source:pdfSrc,
-    pageNum:1,
-    scale:1,
-    numPages:0
+})
+let showHint = ref(false)
+const loadingFailed = ()=>{
+    LOADING.close()
+    ElMessage.error('加载PDF失败!')
+    showHint.value = true
+}
+const loadedPDF=()=>{
+    LOADING.close()
+}
+let LOADING
+onMounted(()=>{
+    if(route.query.pdfSrc.length){
+        LOADING = ElLoading.service({
+            target:'.preview-pdf-wrap',
+            text:'正在加载PDF'
+        })
+    }
 })
 </script>
 
 <template>
     <div class="preview-pdf-wrap">
-        <vue-pdf-embed :source="pdfState.source"/>
+        <template v-if="pdfState.source.length">
+            <vue-pdf-embed :source="pdfState.source" @loading-failed="loadingFailed" @loaded="loadedPDF"/>
+            <p v-if="showHint" class="hint">加载PDF失败!</p>
+        </template>
+        <template v-else>
+            <p class="hint">获取PDF失败!</p>
+        </template>
+        
     </div>
 </template>
 
 <style lang="scss" scoped>
 .preview-pdf-wrap{
+    .hint{
+        margin-top: 100px;
+        text-align: center;
+        color:#999;
+    }
 }
 </style>