upate

src/components/audioDemo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home" style="margin: 1vw">
+  <div class="home">
     <Button type="success" @click="getPermission()" style="margin: 1vw"
       >获取麦克风权限</Button
     >

src/components/components/vpdf.vue

@@ -1,6 +1,9 @@
 <template>
   <!--使用 pdfvuer 实现 滑动浏览 单印章-->
   <div class="pdf">
+    <div class="loading" v-if="loading">
+      <span>加载中...</span>
+    </div>
     <div id="contentArea" class="show">
       <pdf
         :scale.sync="scale"
@@ -56,24 +59,30 @@ export default {
       numPages: 0, // 总页数
       pdfData: undefined,
       inputPage: 1, // 输入的页码
-      loading: null,
+      loading: false,
       scale: "page-width",
     };
   },
   mounted() {
-    this.loading = this.$loading.service({
-      background: "rgba(255, 255, 255, 0.7)",
-      target: document.querySelector(".pdf"),
-    });
+    // this.loading = this.$loading.service({
+    //   background: "rgba(255, 255, 255, 0.7)",
+    //   target: document.querySelector(".loading"),
+    //   text: "加载中...",
+    //   spinner: "",
+    // });
+    this.loading = true;
     this.getPdf();
   },
   beforeDestroy() {},
   watch: {
     pdfUrl: function (s) {
-      this.loading = this.$loading.service({
-        background: "rgba(255, 255, 255, 0.7)",
-        target: document.querySelector(".pdf"),
-      });
+      // this.loading = this.$loading.service({
+      //   background: "rgba(255, 255, 255, 0.7)",
+      //   target: document.querySelector(".loading"),
+      //   text: "加载中...",
+      //   spinner: "",
+      // });
+      this.loading = true;
       this.getPdf();
     },
   },
@@ -87,7 +96,8 @@ export default {
       });
       this.pdfData
         .then((pdf) => {
-          this.loading.close();
+          // this.loading.close();
+          this.loading = false
           this.numPages = pdf.numPages;
         })
         .catch((err) => {
@@ -110,6 +120,19 @@ export default {
 };
 </script>
 <style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
 .pdf {
   height: 100%;
   position: relative;