feat(docs): sync mobile position on anchor click (#11879)

packages/vant-cli/site/desktop/components/Content.vue

@@ -12,6 +12,11 @@ import { copyToClipboard } from '../../common';
 
 export default {
   name: 'VanDocContent',
+  data() {
+    return {
+      iframeDocument: null,
+    };
+  },
 
   computed: {
     currentPage() {
@@ -50,6 +55,19 @@ export default {
           name: this.$route.name,
           hash: '#' + target.id,
         });
+
+        this.syncMobilePos(target.id);
+      }
+    },
+
+    syncMobilePos(id) {
+      // Getting the document at this point is to ensure that the target has been fully rendered.
+      if (this.iframeDocument) {
+        const target = this.iframeDocument.getElementById(id);
+        target && target.scrollIntoView(true);
+      } else {
+        const iframe = document.querySelector('iframe');
+        this.iframeDocument = iframe.contentWindow.document;
       }
     },
 

packages/vant-cli/site/mobile/components/DemoBlock.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="van-doc-demo-block">
-    <h2 v-if="title" class="van-doc-demo-block__title">{{ title }}</h2>
+    <h2 v-if="title" class="van-doc-demo-block__title" :id="slugifyTitle">
+      {{ title }}
+    </h2>
     <div v-if="card" class="van-doc-demo-block__card">
       <slot />
     </div>
@@ -9,6 +11,8 @@
 </template>
 
 <script>
+import { slugify } from 'transliteration';
+
 export default {
   name: 'DemoBlock',
 
@@ -16,6 +20,11 @@ export default {
     card: Boolean,
     title: String,
   },
+  computed: {
+    slugifyTitle() {
+      return slugify(this.title);
+    },
+  },
 };
 </script>