feat(docs): fix right nav style

ElemeFE · Jun 2, 2021 · 85a01d0 · 85a01d0
1 parent 97aca73
commit 85a01d0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git 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
@@ -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
@@ -146,7 +146,6 @@
       :bottom="50"
     ></el-backtop>
   </div>
-  <right-nav />
   </el-scrollbar>
 </template>
 <script>