From 85a01d0d3f1e2dbcafb181c665b262bb11ba3ae5 Mon Sep 17 00:00:00 2001
From: Liu Shuiyuan <13783534092@sina.cn>
Date: Wed, 2 Jun 2021 13:57:29 +0800
Subject: [PATCH] feat(docs): fix right nav style

---
 build/md-loader/index.js              |  1 +
 examples/components/right-nav.vue     | 40 +++++++++++++++++----------
 examples/pages/template/component.tpl |  1 -
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/build/md-loader/index.js b/build/md-loader/index.js
index 2ef0e55ce..9ac3c86be 100644
--- a/build/md-loader/index.js
+++ b/build/md-loader/index.js
@@ -60,6 +60,7 @@ module.exports = function(source) {
     <template>
       <section class="content element-doc">
         ${output.join('')}
+        <right-nav />
       </section>
     </template>
     ${pageScript}
diff --git a/examples/components/right-nav.vue b/examples/components/right-nav.vue
index 3b2a87fd4..503378c7f 100644
--- a/examples/components/right-nav.vue
+++ b/examples/components/right-nav.vue
@@ -2,10 +2,8 @@
   <el-scrollbar
     ref="navScroll"
     class="right-nav"
-    wrap-style="max-height: 300px"
-    style="position: fixed;right: 10px;top: 100px;width: 150px;border-left: 1px solid rgb(220, 223, 230);height: auto;max-height: 300px;"
   >
-    <div v-for="item in anchors" :key="item" style="margin: 3px 0 3px 10px">
+    <div v-for="item in anchors" :key="item" class="right-nav-link">
       <el-link
         :id="item"
         :title="item"
@@ -53,12 +51,13 @@ export default {
       this.resizeObserver.observe(this.scrollContainer.childNodes[0]);
 
       let cachedIndex = -1;
+      let that = this;
       this.scrollContainer.addEventListener('scroll', () => {
-        const index = mapValues.findIndex(item => this.scrollContainer.scrollTop > item - 75);
+        const index = mapValues.findIndex(item => that.scrollContainer.scrollTop > item - 75);
         if (cachedIndex !== index && index !== -1) {
-          this.active = mapKeys[index];
+          that.active = mapKeys[index];
           cachedIndex = index;
-          document.getElementById(this.active).focus();
+          document.getElementById(that.active) && document.getElementById(that.active).focus();
         }
       });
     });
@@ -87,16 +86,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.link {
-  ::v-deep(span) {
-    font-size: 12px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    max-width: 135px;
-  }
+.right-nav {
+    position: fixed;
+    right: 10px;
+    top: 100px;
+    width: 150px;
+    border-left: 1px solid rgb(220, 223, 230);
+    height: auto;
+    max-height: 300px;
+    .right-nav-link {
+        margin: 3px 0 3px 10px;
+        .link {
+            ::v-deep span {
+                font-size: 12px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                max-width: 135px;
+            }
+        }
+    }
 }
-
 @media (max-width: 1490px) {
   .right-nav {
     display: none;
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index 34e6b3806..64c93dc9d 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -146,7 +146,6 @@
       :bottom="50"
     ></el-backtop>
   </div>
-  <right-nav />
   </el-scrollbar>
 </template>
 <script>