From bc6d4a18e08334860bd7f4da01f79b8a0d3dc275 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 26 Jul 2021 00:40:37 +0800
Subject: [PATCH] chore: update i18n demo (#2672)

---
 website/docs/en-US/i18n.md | 42 ++++++++++++++++----------------------
 website/docs/es/i18n.md    | 30 +++++++++++----------------
 website/docs/fr-FR/i18n.md | 30 +++++++++++----------------
 website/docs/jp/i18n.md    | 30 +++++++++++----------------
 website/docs/zh-CN/i18n.md | 30 +++++++++++----------------
 5 files changed, 66 insertions(+), 96 deletions(-)

diff --git a/website/docs/en-US/i18n.md b/website/docs/en-US/i18n.md
index 7940968fdb..68b70f0351 100644
--- a/website/docs/en-US/i18n.md
+++ b/website/docs/en-US/i18n.md
@@ -14,35 +14,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
 
 If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
 
-```ts
+```html
+<template>
+  <el-config-provider :locale="locale">
+    <App />
+  </el-config-provider>
+</template>
+
+<script>
 import { ConfigProvider } from 'element-plus'
 
-import English from 'element-plus/lib/locale/en'
+import fr from 'element-plus/lib/locale/fr'
 
 defineComponent({
   components: {
     [ConfigProvider.name]: ConfigProvider,
-  }
-  template: `
-    <el-config-provider :locale="locale">
-      <slot />
-    </el-config-provider>
-    <button @click="toggle">Switch language</button>
-  `
+  },
   data() {
     return {
-      locale: English,
+      locale: fr,
     }
   },
-  methods: {
-    toggle() {
-      // You can change here to any language you want as long as we support them
-      this.locale = English
-    }
-  }
 })
-
-
+</script>
 ```
 
 #### Useful links：
@@ -88,18 +82,18 @@ createApp(
 Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
 
 ```typescript
-import locale from 'element-plus/lib/locale/lang/zh-cn'
-import 'dayjs/locale/zh-cn'
+import locale from 'element-plus/lib/locale/lang/fr'
+import 'dayjs/locale/fr'
 
-// will auto set Day.js locale to 'zh-cn'
+// will auto set Day.js locale to 'fr'
 app.use(ElementPlus, { locale })
 ```
 
 However, you can use another Day.js locale if needed.
 
 ```typescript
-import 'dayjs/locale/fr'
-dayjs.locale('fr')
+import 'dayjs/locale/es'
+dayjs.locale('es')
 ```
 
 The English locale is imported by default, even if you're using another locale. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
@@ -111,7 +105,7 @@ webpack.config.js
   plugins: [
     new webpack.NormalModuleReplacementPlugin(
       /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
-      'element-plus/lib/locale/lang/zh-cn',
+      'element-plus/lib/locale/lang/fr',
     ),
   ]
 }
diff --git a/website/docs/es/i18n.md b/website/docs/es/i18n.md
index a41b98e444..9f48122a3a 100644
--- a/website/docs/es/i18n.md
+++ b/website/docs/es/i18n.md
@@ -16,35 +16,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
 
 If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
 
-```ts
+```html
+<template>
+  <el-config-provider :locale="locale">
+    <App />
+  </el-config-provider>
+</template>
+
+<script>
 import { ConfigProvider } from 'element-plus'
 
-import Español from 'element-plus/lib/locale/es'
+import es from 'element-plus/lib/locale/es'
 
 defineComponent({
   components: {
     [ConfigProvider.name]: ConfigProvider,
-  }
-  template: `
-    <el-config-provider :locale="locale">
-      <slot />
-    </el-config-provider>
-    <button @click="toggle">Switch language</button>
-  `
+  },
   data() {
     return {
-      locale: Español,
+      locale: es,
     }
   },
-  methods: {
-    toggle() {
-      // You can change here to any language you want as long as we support them
-      this.locale = Español
-    }
-  }
 })
-
-
+</script>
 ```
 
 #### Useful links：
diff --git a/website/docs/fr-FR/i18n.md b/website/docs/fr-FR/i18n.md
index 41d898c523..5121b6d10a 100644
--- a/website/docs/fr-FR/i18n.md
+++ b/website/docs/fr-FR/i18n.md
@@ -16,35 +16,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
 
 If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
 
-```ts
+```html
+<template>
+  <el-config-provider :locale="locale">
+    <App />
+  </el-config-provider>
+</template>
+
+<script>
 import { ConfigProvider } from 'element-plus'
 
-import Français from 'element-plus/lib/locale/fr'
+import en from 'element-plus/lib/locale/en'
 
 defineComponent({
   components: {
     [ConfigProvider.name]: ConfigProvider,
-  }
-  template: `
-    <el-config-provider :locale="locale">
-      <slot />
-    </el-config-provider>
-    <button @click="toggle">Switch language</button>
-  `
+  },
   data() {
     return {
-      locale: Français,
+      locale: en,
     }
   },
-  methods: {
-    toggle() {
-      // You can change here to any language you want as long as we support them
-      this.locale = Français
-    }
-  }
 })
-
-
+</script>
 ```
 
 #### Useful links：
diff --git a/website/docs/jp/i18n.md b/website/docs/jp/i18n.md
index dc5a41f822..2c501253b4 100644
--- a/website/docs/jp/i18n.md
+++ b/website/docs/jp/i18n.md
@@ -14,35 +14,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
 
 If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
 
-```ts
+```html
+<template>
+  <el-config-provider :locale="locale">
+    <App />
+  </el-config-provider>
+</template>
+
+<script>
 import { ConfigProvider } from 'element-plus'
 
-import 日本語 from 'element-plus/lib/locale/ja'
+import ja from 'element-plus/lib/locale/ja'
 
 defineComponent({
   components: {
     [ConfigProvider.name]: ConfigProvider,
-  }
-  template: `
-    <el-config-provider :locale="locale">
-      <slot />
-    </el-config-provider>
-    <button @click="toggle">Switch language</button>
-  `
+  },
   data() {
     return {
-      locale: 日本語,
+      locale: ja,
     }
   },
-  methods: {
-    toggle() {
-      // You can change here to any language you want as long as we support them
-      this.locale = 日本語
-    }
-  }
 })
-
-
+</script>
 ```
 
 #### Useful links：
diff --git a/website/docs/zh-CN/i18n.md b/website/docs/zh-CN/i18n.md
index 736a262228..ea25884533 100644
--- a/website/docs/zh-CN/i18n.md
+++ b/website/docs/zh-CN/i18n.md
@@ -13,35 +13,29 @@ Element Plus 组件内部默认使用英语，若希望使用其他语言，则
 #### 1. 通过 ConfigProvider 的方式来使用，详细的使用方法请查阅 ConfigProvider 的文档
 如果你的项目中还在使用 `options API`, 那么你应该使用此方法，我们更加建议用户使用该方法，因为这样会减少使用的负担，但如果你在项目中深度使用 `Composition API`，那么你可以使用第二种方法来为整个应用提供语言支持。
 
-```ts
+```html
+<template>
+  <el-config-provider :locale="locale">
+    <App />
+  </el-config-provider>
+</template>
+
+<script>
 import { ConfigProvider } from 'element-plus'
 
-import Chinese from 'element-plus/lib/locale/zh-cn'
+import zhCn from 'element-plus/lib/locale/zh-cn'
 
 defineComponent({
   components: {
     [ConfigProvider.name]: ConfigProvider,
-  }
-  template: `
-    <el-config-provider :locale="locale">
-      <slot />
-    </el-config-provider>
-    <button @click="toggle">切换语言</button>
-  `
+  },
   data() {
     return {
-      locale: Chinese,
+      locale: zhCn,
     }
   },
-  methods: {
-    toggle() {
-      // 你可以把这里的 locale 赋值为任何支持的语言，
-      this.locale = Chinese
-    }
-  }
 })
-
-
+</script>
 ```
 
 #### 有用的链接：