docs(example): optimized selected el

example/app.js

@@ -113,8 +113,24 @@ const titleAndDescMap = transformMd(en);
 
 const App = {
   name: 'App',
+  data() {
+    return {
+      currentId: this.getCurrentId(),
+    };
+  },
   mounted() {
     hljs.initHighlighting();
+    window.onhashchange = () => {
+      this.currentId = this.getCurrentId();
+    };
+    if (this.currentId) {
+      document.getElementById(this.currentId).scrollIntoView();
+    }
+  },
+  methods: {
+    getCurrentId() {
+      return location.hash.slice(1);
+    },
   },
   render(h) {
     const menus = components.map(item => {
@@ -130,6 +146,7 @@ const App = {
           const props = {
             id,
             code,
+            active: id === this.currentId,
             ...titleAndDescMap[id],
           };
           return <Card {...{ props }}>{h(component)}</Card>;

example/helper/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card" :class="{ active }">
     <section :id="id" class="card-title" v-html="title"></section>
     <section class="card-description markdown-body" v-html="description"></section>
     <section class="card-demo markdown-body">
@@ -27,6 +27,10 @@ export default {
     title: String,
     description: String,
     code: String,
+    active: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -52,8 +56,10 @@ $border-color: #ebedf0;
   color: #314659;
   border: 1px solid $border-color;
   border-radius: 4px;
-  & + & {
-    margin-top: 60px;
+  margin-bottom: 60px;
+  margin-top: 20px;
+  &.active {
+    border-color: #1284e7;
   }
 }
 

example/helper/container.vue

@@ -18,32 +18,45 @@
 </template>
 
 <script>
+function rafThrottle(fn) {
+  let isRunning = false;
+  return function fnBinfRaf(...args) {
+    if (isRunning) return;
+    isRunning = true;
+    requestAnimationFrame(() => {
+      isRunning = false;
+      fn.apply(this, args);
+    });
+  };
+}
+
 export default {
+  name: 'Container',
   props: {
     menus: Array,
   },
   data() {
     return {
-      offset: [],
       activeIndex: 0,
+      handleScroll: rafThrottle(this.scroll),
     };
   },
-  mounted() {
-    const scrollEl = this.$refs.main;
-    const els = document.querySelectorAll('.card-title');
-    const { top } = scrollEl.getBoundingClientRect();
-    const offset = [];
-    for (let i = 0; i < els.length; i++) {
-      const el = els[i];
-      offset.push(el.getBoundingClientRect().top - top);
-    }
-    this.offset = offset;
+  computed: {
+    menuIds() {
+      return this.menus.map(v => v.id);
+    },
   },
   methods: {
-    handleScroll(evt) {
-      const value = evt.currentTarget.scrollTop - 10;
-      const index = this.offset.findIndex(v => v > value);
-      this.activeIndex = index;
+    scroll() {
+      for (let i = 0; i < this.menuIds.length; i++) {
+        const id = this.menuIds[i];
+        const el = document.getElementById(id);
+        const { top } = el.getBoundingClientRect();
+        if (top >= 0) {
+          this.activeIndex = i;
+          break;
+        }
+      }
     },
   },
 };