From 68a82b73dfc685851f8e08db7580e16447e3eab7 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 11 Oct 2019 14:25:34 +0800
Subject: [PATCH] 修复校准锚点导航定位跳转准确度

---
 .env                                |  2 +-
 examples/views/layout/component.vue | 45 ++++++++++++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/.env b/.env
index 2220e99..4ded078 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
 # 版本号
-VUE_APP_VERSION = '0.4.1'
+VUE_APP_VERSION = '0.5.3'
 # 自定义变量 Cookie失效时间 1天
 VUE_APP_NAME = 'Eagle Web Tookit'
\ No newline at end of file
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 52ab204..973640e 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -19,7 +19,7 @@
         <router-view></router-view>
       </el-main>
       <el-aside class="layout-aside__preview" width="200px">
-        <a class="anchor" :class="{ 'active': item.hash === currentAnchor }" v-for="(item, index) in anchorList" :key="index" :href="item.hash">{{ item.text }}</a>
+        <a class="anchor" :class="{ 'active': item.hash === currentAnchor }" v-for="(item, index) in anchorList" :key="index" @click="jumpAnchor(item)">{{ item.text }}</a>
       </el-aside>
     </el-container>
   </el-container>
@@ -29,6 +29,8 @@
 import LayoutHeader from './components/header';
 import { guides, components } from '@/router/routes';
 
+const headerHeight = 80;
+
 export default {
   name: 'componentLayout',
   components: { LayoutHeader },
@@ -47,21 +49,21 @@ export default {
   },
   mounted() {
     this.initAnchorList();
-    window.onscroll = ((e) => {
-      if (!this.isBottom()) {
-        for (let index in this.anchorList) {
-          let anchor = this.anchorList[index] || {};
-          if (window.pageYOffset <= anchor.offsetTop - 65) {
-            this.currentAnchor = (anchor || this.anchorList[0]).hash;
-            break;
-          }
+    window.onscroll = (e) => {
+      let rangeIndex = 0;
+      for (let index in this.anchorList) {
+        let anchor = this.anchorList[index] || {};
+        const dom = document.querySelector(anchor.hash) || { offsetTop: 0 };
+        if (window.pageYOffset >= dom.offsetTop - headerHeight) {
+          rangeIndex = index
         }
       }
-    });
+      this.currentAnchor = this.anchorList[rangeIndex].hash;
+    };
     // 初次加载时根据url hash跳转到指定锚点
     if (this.$route.hash) {
       const anchor = document.querySelector(this.$route.hash);
-      document.documentElement.scrollTop = anchor.offsetTop - 65;
+      document.documentElement.scrollTop = anchor.offsetTop - headerHeight;
     }
   },
   watch:{
@@ -70,11 +72,6 @@ export default {
       if (to.path !== from.path) {
         this.$nextTick(this.initAnchorList);
       }
-      if (!this.isBottom()) {
-        setTimeout(() => {
-          window.scrollBy(0, -65);
-        }, 1);
-      }
     }
   },
   computed: {
@@ -98,11 +95,19 @@ export default {
       return scrollTop + windowHeight === scrollHeight;
     },
     initAnchorList() {
+      document.documentElement.scrollTop = 0;
       this.anchorList = [];
       const domList = document.querySelectorAll('.header-anchor');
       let anchorList = [];
       for (let index in domList) {
         let dom = domList[index] || {};
+        dom.addEventListener('click', e => {
+          // 阻止a标签的默认行为
+          e = e || window.event;
+          e.preventDefault();
+          document.documentElement.scrollTop = dom.offsetTop - headerHeight;
+          this.$router.replace({ path: this.$route.path, hash: dom.hash });
+        });
         if (dom.parentNode) {
           const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();
           if (text === 'API') {
@@ -112,7 +117,6 @@ export default {
               text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),
               href: dom.href,
               hash: dom.hash,
-              offsetTop: dom.offsetTop,
             });
           }
         }
@@ -120,6 +124,11 @@ export default {
       this.anchorList = anchorList;
       this.currentAnchor = (anchorList[0] || {}).hash;
     },
+    jumpAnchor({ hash, offsetTop }) {
+      this.$router.replace({ path: this.$route.path, hash });
+      const dom = document.querySelector(hash) || { offsetTop: 0 };
+      document.documentElement.scrollTop = dom.offsetTop - headerHeight;
+    },
     handleSelect(key) {
       this.$router.push({ name: key });
     }
@@ -181,7 +190,9 @@ export default {
       color: $text;
       transition: all 300ms;
       border-left: 1px solid $border;
+      cursor: pointer;
     }
+    .anchor:hover,
     .active {
       color: $primary;
       border-left: 1px solid $primary;
--
libgit2 0.21.0