From 6cdb7e08ef06bf10a2a366401470cb629ffb4d7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com>
Date: Mon, 4 Mar 2024 09:57:54 +0800
Subject: [PATCH] docs: [anchor] add locale (#16022)

---
 .../crowdin/en-US/component/anchor.json       | 14 ++++++++
 docs/examples/anchor/affix.vue                | 32 +++++++++++++-----
 docs/examples/anchor/basic.vue                | 32 +++++++++++++-----
 docs/examples/anchor/change.vue               | 31 ++++++++++++-----
 docs/examples/anchor/horizontal.vue           | 20 +++++++++--
 docs/examples/anchor/underline.vue            | 33 ++++++++++++++-----
 6 files changed, 127 insertions(+), 35 deletions(-)
 create mode 100644 docs/.vitepress/crowdin/en-US/component/anchor.json

diff --git a/docs/.vitepress/crowdin/en-US/component/anchor.json b/docs/.vitepress/crowdin/en-US/component/anchor.json
new file mode 100644
index 0000000000..1d11e36779
--- /dev/null
+++ b/docs/.vitepress/crowdin/en-US/component/anchor.json
@@ -0,0 +1,14 @@
+{
+  "basic-usage": "basic-usage",
+  "horizontal-mode": "horizontal-mode",
+  "scroll-container": "scroll-container",
+  "anchor-api": "anchor-api",
+  "anchor-attributes": "anchor-attributes",
+  "anchor-events": "anchor-events",
+  "Basic Usage": "Basic Usage",
+  "Horizontal Mode": "Horizontal Mode",
+  "Scroll Container": "Scroll Container",
+  "Anchor API": "Anchor API",
+  "Anchor Attributes": "Anchor Attributes",
+  "Anchor events": "Anchor events"
+}
diff --git a/docs/examples/anchor/affix.vue b/docs/examples/anchor/affix.vue
index f55f45b03e..c65d473e87 100644
--- a/docs/examples/anchor/affix.vue
+++ b/docs/examples/anchor/affix.vue
@@ -1,18 +1,34 @@
 <template>
   <el-affix :offset="60">
     <el-anchor :offset="70" style="width: 300px">
-      <el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
-      <el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
-      <el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
-      <el-anchor-link href="#anchor-api">
-        Anchor API
+      <el-anchor-link :href="`#${locale['basic-usage']}`">
+        {{ locale['Basic Usage'] }}
+      </el-anchor-link>
+      <el-anchor-link :href="`#${locale['horizontal-mode']}`">
+        {{ locale['Horizontal Mode'] }}
+      </el-anchor-link>
+      <el-anchor-link :href="`#${locale['scroll-container']}`">
+        {{ locale['Scroll Container'] }}
+      </el-anchor-link>
+      <el-anchor-link :href="`#${locale['anchor-api']}`">
+        {{ locale['Anchor API'] }}
         <template #sub-link>
-          <el-anchor-link href="#anchor-attributes">
-            Anchor Attributes
+          <el-anchor-link :href="`#${locale['anchor-attributes']}`">
+            {{ locale['Anchor attributes'] }}
+          </el-anchor-link>
+          <el-anchor-link :href="`#${locale['anchor-events']}`">
+            {{ locale['Anchor events'] }}
           </el-anchor-link>
-          <el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
         </template>
       </el-anchor-link>
     </el-anchor>
   </el-affix>
 </template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
+import { useLang } from '~/composables/lang'
+
+const lang = useLang()
+const locale = computed(() => anchorLocale[lang.value])
+</script>
diff --git a/docs/examples/anchor/basic.vue b/docs/examples/anchor/basic.vue
index d73b3c9629..4efd4147e9 100644
--- a/docs/examples/anchor/basic.vue
+++ b/docs/examples/anchor/basic.vue
@@ -1,16 +1,32 @@
 <template>
   <el-anchor :offset="70">
-    <el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
-    <el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
-    <el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
-    <el-anchor-link href="#anchor-api">
-      Anchor API
+    <el-anchor-link :href="`#${locale['basic-usage']}`">
+      {{ locale['Basic Usage'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['horizontal-mode']}`">
+      {{ locale['Horizontal Mode'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['scroll-container']}`">
+      {{ locale['Scroll Container'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['anchor-api']}`">
+      {{ locale['Anchor API'] }}
       <template #sub-link>
-        <el-anchor-link href="#anchor-attributes">
-          Anchor Attributes
+        <el-anchor-link :href="`#${locale['anchor-attributes']}`">
+          {{ locale['Anchor attributes'] }}
+        </el-anchor-link>
+        <el-anchor-link :href="`#${locale['anchor-events']}`">
+          {{ locale['Anchor events'] }}
         </el-anchor-link>
-        <el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
       </template>
     </el-anchor-link>
   </el-anchor>
 </template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
+import { useLang } from '~/composables/lang'
+
+const lang = useLang()
+const locale = computed(() => anchorLocale[lang.value])
+</script>
diff --git a/docs/examples/anchor/change.vue b/docs/examples/anchor/change.vue
index f6a14b9ff2..051a65e6ef 100644
--- a/docs/examples/anchor/change.vue
+++ b/docs/examples/anchor/change.vue
@@ -1,21 +1,36 @@
 <template>
   <el-anchor :offset="70" @change="handleChange">
-    <el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
-    <el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
-    <el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
-    <el-anchor-link href="#anchor-api">
-      Anchor API
+    <el-anchor-link :href="`#${locale['basic-usage']}`">
+      {{ locale['Basic Usage'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['horizontal-mode']}`">
+      {{ locale['Horizontal Mode'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['scroll-container']}`">
+      {{ locale['Scroll Container'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['anchor-api']}`">
+      {{ locale['Anchor API'] }}
       <template #sub-link>
-        <el-anchor-link href="#anchor-attributes">
-          Anchor Attributes
+        <el-anchor-link :href="`#${locale['anchor-attributes']}`">
+          {{ locale['Anchor attributes'] }}
+        </el-anchor-link>
+        <el-anchor-link :href="`#${locale['anchor-events']}`">
+          {{ locale['Anchor events'] }}
         </el-anchor-link>
-        <el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
       </template>
     </el-anchor-link>
   </el-anchor>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
+import { useLang } from '~/composables/lang'
+
+const lang = useLang()
+const locale = computed(() => anchorLocale[lang.value])
+
 const handleChange = (href: string) => {
   console.log(`anchor change: ${href}`)
 }
diff --git a/docs/examples/anchor/horizontal.vue b/docs/examples/anchor/horizontal.vue
index 4b4579f7c2..c8e7591766 100644
--- a/docs/examples/anchor/horizontal.vue
+++ b/docs/examples/anchor/horizontal.vue
@@ -1,7 +1,21 @@
 <template>
   <el-anchor :offset="70" direction="horizontal">
-    <el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
-    <el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
-    <el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
+    <el-anchor-link :href="`#${locale['basic-usage']}`">
+      {{ locale['Basic Usage'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['horizontal-mode']}`">
+      {{ locale['Horizontal Mode'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['scroll-container']}`">
+      {{ locale['Scroll Container'] }}
+    </el-anchor-link>
   </el-anchor>
 </template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
+import { useLang } from '~/composables/lang'
+
+const lang = useLang()
+const locale = computed(() => anchorLocale[lang.value])
+</script>
diff --git a/docs/examples/anchor/underline.vue b/docs/examples/anchor/underline.vue
index e3829d2283..7d432ebc6f 100644
--- a/docs/examples/anchor/underline.vue
+++ b/docs/examples/anchor/underline.vue
@@ -1,16 +1,33 @@
 <template>
   <el-anchor type="underline" :offset="70">
-    <el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
-    <el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
-    <el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
-    <el-anchor-link href="#anchor-api">
-      Anchor API
+    <el-anchor-link :href="`#${locale['basic-usage']}`">
+      {{ locale['Basic Usage'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['horizontal-mode']}`">
+      {{ locale['Horizontal Mode'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['scroll-container']}`">
+      {{ locale['Scroll Container'] }}
+    </el-anchor-link>
+    <el-anchor-link :href="`#${locale['anchor-api']}`">
+      {{ locale['Anchor API'] }}
       <template #sub-link>
-        <el-anchor-link href="#anchor-attributes">
-          Anchor Attributes
+        <el-anchor-link :href="`#${locale['anchor-attributes']}`">
+          {{ locale['Anchor attributes'] }}
+        </el-anchor-link>
+        <el-anchor-link :href="`#${locale['anchor-events']}`">
+          {{ locale['Anchor events'] }}
         </el-anchor-link>
-        <el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
       </template>
     </el-anchor-link>
   </el-anchor>
 </template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
+import { useLang } from '~/composables/lang'
+
+const lang = useLang()
+const locale = computed(() => anchorLocale[lang.value])
+</script>