From caa7ba030ad86973b7f846fe8539a9c3af38f066 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Mon, 26 Aug 2019 13:45:15 +0800
Subject: [PATCH] 组件布局增加右侧锚点导航

---
 examples/views/docs/detail.md       |   2 +-
 examples/views/docs/form.md         |   2 ++
 examples/views/docs/scheme.md       |   2 ++
 examples/views/docs/search.md       |   2 ++
 examples/views/docs/select.md       |   2 ++
 examples/views/docs/table.md        |   1 +
 examples/views/layout/component.vue | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------
 examples/views/layout/default.vue   |  12 +++++-------
 8 files changed, 119 insertions(+), 27 deletions(-)

diff --git a/examples/views/docs/detail.md b/examples/views/docs/detail.md
index eb039ac..f751f57 100644
--- a/examples/views/docs/detail.md
+++ b/examples/views/docs/detail.md
@@ -56,7 +56,7 @@ export default {
 
 ---
 
-1231
+## API
 
 ## Attribute 属性
 
diff --git a/examples/views/docs/form.md b/examples/views/docs/form.md
index d2f095f..951962f 100644
--- a/examples/views/docs/form.md
+++ b/examples/views/docs/form.md
@@ -108,6 +108,8 @@ export default {
 
 :::
 
+## API
+
 ## Attribute 属性
 
 参数|说明|类型|可选值|默认值
diff --git a/examples/views/docs/scheme.md b/examples/views/docs/scheme.md
index abbd13c..ed09e03 100644
--- a/examples/views/docs/scheme.md
+++ b/examples/views/docs/scheme.md
@@ -85,6 +85,8 @@ export default {
 
 :::
 
+## API
+
 ## Attribute 属性
 
 参数|说明|类型|可选值|默认值
diff --git a/examples/views/docs/search.md b/examples/views/docs/search.md
index 6ac6cd2..af8068a 100644
--- a/examples/views/docs/search.md
+++ b/examples/views/docs/search.md
@@ -100,6 +100,8 @@ export default {
 
 :::
 
+## API
+
 ## Attribute 属性
 
 参数|说明|类型|可选值|默认值
diff --git a/examples/views/docs/select.md b/examples/views/docs/select.md
index 0a69265..b543c33 100755
--- a/examples/views/docs/select.md
+++ b/examples/views/docs/select.md
@@ -63,6 +63,8 @@ export default {
 
 :::
 
+## API
+
 ## Attribute 属性
 
 参数|说明|类型|可选值|默认值
diff --git a/examples/views/docs/table.md b/examples/views/docs/table.md
index a700572..3481dc2 100644
--- a/examples/views/docs/table.md
+++ b/examples/views/docs/table.md
@@ -121,6 +121,7 @@ export default {
 
 :::
 
+## API
 
 ## Attribute 属性
 
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 166da11..1f758db 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -1,23 +1,25 @@
 <template>
-  <div id="app">
-    <el-container>
-      <layout-header></layout-header>
-      <el-container class="layout-container__component">
-        <el-aside class="layout-aside__component" width="200px">
-          <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
-            <h4 style="padding: 0 20px;">组件</h4>
-            <el-menu-item-group v-for="(component, idx) in components" :key="idx">
-              <template slot="title">{{ component.group }}</template>
-              <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
-            </el-menu-item-group>
-          </el-menu>
-        </el-aside>
-        <el-main class="layout-main__component">
-          <router-view></router-view>
-        </el-main>
-      </el-container>
+  <el-container>
+    <layout-header></layout-header>
+    <el-container class="layout-container__component">
+      <el-aside class="layout-aside__component" width="200px">
+        <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
+          <h4 style="padding: 0 20px;">组件</h4>
+          <el-menu-item-group v-for="(component, idx) in componentList" :key="idx">
+            <template slot="title">{{ component.group }}</template>
+            <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
+          </el-menu-item-group>
+        </el-menu>
+      </el-aside>
+      <a class="target-fix"></a>
+      <el-main class="layout-main__component">
+        <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>
+      </el-aside>
     </el-container>
-  </div>
+  </el-container>
 </template>
 
 <script>
@@ -30,14 +32,74 @@ export default {
   data() {
     return {
       activeMenu: 'select',
-      components
+      componentList: components,
+      anchorList: [],
+      currentAnchor: '',
     }
   },
   created() {
     const { name } = this.$route || {};
     this.activeMenu = name;
   },
+  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;
+          }
+        }
+      }
+    });
+  },
+  watch:{
+    $route(to, from) {
+      this.currentAnchor = to.hash;
+      if (to.path !== from.path) {
+        this.$nextTick(this.initAnchorList);
+      }
+      if (!this.isBottom()) {
+        setTimeout(() => {
+          window.scrollBy(0, -65);
+        }, 1);
+      }
+    }
+  },
   methods: {
+    isBottom() {
+      // 变量scrollTop是滚动条滚动时，距离顶部的距离
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      // 变量windowHeight是可视区的高度
+      const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      // 变量scrollHeight是滚动条的总高度
+      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+      // 滚动条到底部的条件
+      return scrollTop + windowHeight === scrollHeight;
+    },
+    initAnchorList() {
+      this.anchorList = [];
+      const domList = document.querySelectorAll('.header-anchor');
+      let anchorList = [];
+      for (let index in domList) {
+        let dom = domList[index] || {};
+        const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();
+        if (text === 'API') {
+          break;
+        } else {
+          anchorList.push({
+            text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),
+            href: dom.href,
+            hash: dom.hash,
+            offsetTop: dom.offsetTop,
+          });
+        }
+      }
+      this.anchorList = anchorList;
+      this.currentAnchor = anchorList[0].hash;
+    },
     handleSelect(key) {
       this.$router.push({ name: key });
     }
@@ -61,6 +123,7 @@ export default {
       height: 90%;
       border-right: 1px solid #e6e6e6;
     }
+    left: 0;
     position: fixed;
     height: calc(100vh - 60px);
     background: #fff;
@@ -80,8 +143,30 @@ export default {
       border-right: 0;
     }
   }
+  .layout-aside__preview {
+    position: fixed;
+    right: 0;
+    height: calc(100vh - 60px);
+    width: 150px !important;
+    padding: 30px 0;
+    .anchor {
+      width: 100%;
+      display: inline-block;
+      font-size: 12px;
+      text-decoration: none;
+      padding: 5px 20px;
+      color: $text;
+      transition: all 300ms;
+      border-left: 1px solid $border;
+    }
+    .active {
+      color: $primary;
+      border-left: 1px solid $primary;
+    }
+  }
   .layout-main__component {
     margin-left: 200px;
+    margin-right: 150px;
     padding: 20px 40px;
   }
 }
diff --git a/examples/views/layout/default.vue b/examples/views/layout/default.vue
index e418d13..fed189b 100644
--- a/examples/views/layout/default.vue
+++ b/examples/views/layout/default.vue
@@ -1,12 +1,10 @@
 <template>
-  <div id="app">
-    <el-container>
-      <layout-header></layout-header>
-      <el-container class="layout-container__default">
-        <router-view></router-view>
-      </el-container>
+  <el-container>
+    <layout-header></layout-header>
+    <el-container class="layout-container__default">
+      <router-view></router-view>
     </el-container>
-  </div>
+  </el-container>
 </template>
 
 <script>
--
libgit2 0.21.0