完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5

src/pages/demo/plugins/i18n/components/DemoI18n.vue

@@ -0,0 +1,67 @@
+<i18n>
+{
+  "cn": {
+    "subtitle": "点击上面的按钮，你可以在两个示例页面之间切换，检查语言变化",
+    "hello": "你好",
+    "vue": "Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。",
+    "check": {
+      "title": "请选择",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "东京",
+        "NewYork": "纽约"
+      }
+    }
+  },
+  "en": {
+    "subtitle": "Click the button above, you can switch between two sample pages to check language changes",
+    "hello": "hello",
+    "vue": "Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.",
+    "check": {
+      "title": "Please choose",
+      "label": {
+        "Beijing": "Beijing",
+        "Tokyo": "Tokyo",
+        "NewYork": "NewYork"
+      }
+    }
+  },
+  "ja": {
+    "subtitle": "上のボタンをクリックして，あなたは2つの例のページの間で切り替えて、言語の変化を検査することができます",
+    "hello": "こんにちは",
+    "vue": "Vue (発音は /vjuː/、view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。",
+    "check": {
+      "title": "選択してください",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "東京",
+        "NewYork": "ニューヨーク"
+      }
+    }
+  }
+}
+</i18n>
+
+<template>
+  <div>
+    <p>{{$t('subtitle')}}</p>
+    <el-tag>{{$t('hello')}}</el-tag>
+    <p>{{$t('vue')}}</p>
+    <p>{{$t('check.title')}}</p>
+    <el-checkbox-group v-model="check">
+      <el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
+      <el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
+      <el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      check: ['a', 'b']
+    }
+  }
+}
+</script>

src/pages/demo/plugins/i18n/components/DemoI18nControl.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="d2-mb">
+    <el-radio-group v-model="lang" @change="handleChange">
+      <el-radio-button label="cn">中文</el-radio-button>
+      <el-radio-button label="ja">日本語</el-radio-button>
+      <el-radio-button label="en">English</el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      lang: 'cn'
+    }
+  },
+  created () {
+    this.lang = this.$i18n.locale
+  },
+  methods: {
+    handleChange (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>

src/pages/demo/plugins/i18n/demo1.vue

@@ -0,0 +1,16 @@
+<template>
+  <d2-container>
+    <template slot="header">{{`${$t('pub.pageHeader.demo')} 1`}}</template>
+    <DemoI18nControl></DemoI18nControl>
+    <DemoI18n></DemoI18n>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  components: {
+    DemoI18nControl: () => import('./components/DemoI18nControl'),
+    DemoI18n: () => import('./components/DemoI18n')
+  }
+}
+</script>

src/pages/demo/plugins/i18n/demo2.vue

@@ -0,0 +1,16 @@
+<template>
+  <d2-container>
+    <template slot="header">{{`${$t('pub.pageHeader.demo')} 2`}}</template>
+    <DemoI18nControl></DemoI18nControl>
+    <DemoI18n></DemoI18n>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  components: {
+    DemoI18nControl: () => import('./components/DemoI18nControl'),
+    DemoI18n: () => import('./components/DemoI18n')
+  }
+}
+</script>