优化主页 加载pdf时的loading 显示

src/router/index.js

@@ -5,6 +5,11 @@ import Home from "../views/Home/index.vue";
 
 Vue.use(VueRouter);
 
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err);
+};
+
 const routes = [
   {
     path: "/",

src/views/About.vue

@@ -14,7 +14,14 @@
           <el-image class="world" style="width:50%;height:auto" :src="world" />
           <div class="group" style="width:50%;height:auto">
             <template v-for="(el, i) in imageList">
-              <el-image style="width:30%;height:30%" :src="el.src" :key="i" />
+              <el-tooltip
+                placement="top"
+                :content="el.name"
+                :key="i"
+                effect="light"
+              >
+                <el-image style="width:30%;height:30%" :src="el.src" />
+              </el-tooltip>
             </template>
           </div>
         </div>

src/views/Layout/eHeader/eMenuItem.vue

@@ -1,11 +1,12 @@
 <template>
   <li class="menu-item" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-    <div class="title" @click.self="goLinkPage(item)">{{ item.name }}</div>
+    <div class="title" @click.self="goLinkPage(node)">{{ node.name }}</div>
-    <ul class="list" v-if="show && item.children && item.children.length">
+    <ul class="list" v-if="show && node.children && node.children.length">
       <e-menu-item
-        v-for="(el, i) in item.children"
+        v-for="(el, i) in node.children"
         :key="i"
-        :item="el"
+        :node="el"
+        @index="onClick"
         @close="onClose"
       />
     </ul>
@@ -16,7 +17,7 @@
 export default {
   name: "eMenuItem",
   props: {
-    item: {
+    node: {
       type: Object,
       required: true
     }
@@ -33,13 +34,17 @@ export default {
     onMouseLeave() {
       this.show = false;
     },
+    onClick() {
+      this.$emit("index");
+    },
     onClose() {
       this.show = false;
       this.$emit("close");
     },
-    goLinkPage(item) {
+    goLinkPage(node) {
-      if (item.href) {
+      if (node.href) {
-        this.$router.push({ path: item.href });
+        this.$router.push({ path: node.href });
+        this.onClick();
         this.onClose();
       }
     }

src/views/Layout/eHeader/eMenuList.vue

@@ -7,17 +7,28 @@
       @mouseenter="onMouseEnter(i + 1)"
       @mouseleave="onMouseLeave(0)"
     >
-      <router-link v-if="node.href" :to="node.href"
+      <a
+        v-if="node.href"
+        @click="goLinkPage(node, i)"
+        :style="{
+          background: index == i ? '#f1f4f6' : '#fff'
+        }"
         >{{ node.name }}
-      </router-link>
+      </a>
-      <a v-else>{{ node.name }}</a>
+      <a
+        v-else
+        :style="{
+          background: index == i ? '#f1f4f6' : '#fff'
+        }"
+        >{{ node.name }}</a
+      >
       <div
         class="context"
         v-if="node.children"
         :class="active == i + 1 ? 'open' : 'close'"
       >
         <ul v-for="(el, j) in node.children" :key="j">
-          <e-menu-item :item="el" @close="active = -1" />
+          <e-menu-item :node="el" @close="active = -1" @index="onClick(i)" />
         </ul>
       </div>
     </div>
@@ -39,10 +50,14 @@ export default {
   },
   data() {
     return {
+      index: -1,
       active: -1
     };
   },
   methods: {
+    onClick(index) {
+      this.index = index;
+    },
     onMouseEnter(active) {
       setTimeout(() => {
         this.active = active;
@@ -50,6 +65,10 @@ export default {
     },
     onMouseLeave(active) {
       this.active = active;
+    },
+    goLinkPage(node, index) {
+      this.onClick(index);
+      this.$router.push({ path: node.href });
     }
   }
 };
@@ -89,7 +108,7 @@ export default {
       display: block;
       position: fixed;
       z-index: 99;
-      margin: 1px 0;
+      border-top: 1px solid #ebeef5;
 
       ul {
         position: relative;

src/views/PreviewPdf/index.vue

@@ -1,7 +1,15 @@
 <template>
-  <div class="pdf">
+  <div class="pdf" v-loading="loading">
     <template v-for="i in numPages">
-      <pdf class="page" v-loading="loading" :src="src" :page="i" :key="i" />
+      <pdf
+        class="page"
+        :src="src"
+        :page="i"
+        :key="i"
+        @page-loaded="numCount = $event"
+        @error="loading = false"
+        @loaded="pdfLoaded"
+      />
     </template>
   </div>
 </template>
@@ -17,7 +25,8 @@ export default {
   data() {
     return {
       numPages: 0,
-      loading: false
+      numCount: 0,
+      loading: true
     };
   },
   computed: {
@@ -26,15 +35,14 @@ export default {
     }
   },
   mounted() {
-    this.loading = true;
+    this.src.promise.then(pdf => {
-    this.src.promise
+      this.numPages = pdf.numPages;
-      .then(pdf => {
+    });
-        this.numPages = pdf.numPages;
+  },
-        this.loading = false;
+  methods: {
-      })
+    pdfLoaded() {
-      .catch(() => {
+      this.loading = !(--this.numCount <= 0);
-        this.loading = false;
+    }
-      });
   }
 };
 </script>

src/views/Relation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <div class="container">
+    <address class="container">
       <p><span v-html="`联系人：`" />许经理</p>
       <p><span v-html="`手&ensp;&ensp;机：`" />13910989830</p>
       <p><span v-html="`邮&ensp;&ensp;箱：`" />henry@joylink.club</p>
@@ -8,7 +8,7 @@
       <div class="picture">
         <el-image :src="wxcode" />
       </div>
-    </div>
+    </address>
   </div>
 </template>