feature:add i18n

2017-11-03 18:37:49 +08:00
parent bb1d939a94
commit e05da2650b
16 changed files with 381 additions and 55 deletions
--- a/src/views/i18n/index.vue
+++ b/src/views/i18n/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <svg-icon icon-class="international" />
+        <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
+      </div>
+      <div>
+        <el-radio-group v-model="lang" size="small">
+          <el-radio label="zh" border>简体中文</el-radio>
+          <el-radio label="en" border>English</el-radio>
+        </el-radio-group>
+        <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
+      </div>
+    </el-card>
+    <el-row :gutter="20" style="margin:100px 50px 50px;">
+      <el-col :span="12">
+        <div class="block">
+          <el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
+        </div>
+        <div class="block">
+          <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+            :total="400">
+          </el-pagination>
+        </div>
+        <div class="block">
+          <el-button  size="small">{{$t('i18nView.default')}}</el-button>
+          <el-button size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
+          <el-button size="small" type="success">{{$t('i18nView.success')}}</el-button>
+          <el-button size="small" type="info">{{$t('i18nView.info')}}</el-button>
+          <el-button size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
+          <el-button size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
+          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="180"></el-table-column>
+          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="180"></el-table-column>
+          <el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import local from './local'
+const viewName = 'i18nView'
+
+export default {
+  name: 'i18n',
+  data() {
+    return {
+      date: '',
+      currentPage: 5,
+      tableData: [{
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      }]
+    }
+  },
+  created() {
+    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
+      this.$i18n.mergeLocaleMessage('en', local.en)
+      this.$i18n.mergeLocaleMessage('zh', local.zh)
+    }
+  },
+  computed: {
+    lang: {
+      get() {
+        return this.$store.state.app.language
+      },
+      set(lang) {
+        this.$i18n.locale = lang
+        this.$store.dispatch('setLanguage', lang)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  width: 600px;
+  margin: 20px auto;
+}
+
+.block {
+  padding: 25px;
+}
+</style>
--- a/src/views/i18n/local.js
+++ b/src/views/i18n/local.js
@@ -0,0 +1,36 @@
+
+export default {
+  zh: {
+    i18nView: {
+      title: '切换语言',
+      note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
+      datePlaceholder: '请选择日期',
+      tableDate: '日期',
+      tableName: '姓名',
+      tableAddress: '地址',
+      default: '默认按钮',
+      primary: '主要按钮',
+      success: '成功按钮',
+      info: '信息按钮',
+      warning: '警告按钮',
+      danger: '危险按钮'
+    }
+
+  },
+  en: {
+    i18nView: {
+      title: 'Switch Language',
+      note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
+      datePlaceholder: 'Pick a day',
+      tableDate: 'tableDate',
+      tableName: 'tableName',
+      tableAddress: 'tableAddress',
+      default: 'default:',
+      primary: 'primary',
+      success: 'success',
+      info: 'info',
+      warning: 'warning',
+      danger: 'danger'
+    }
+  }
+}
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -12,6 +12,14 @@
        <screenfull class="screenfull right-menu-item"></screenfull>
      </el-tooltip>

+      <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+        <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
+          <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
      <el-tooltip effect="dark" content="换肤" placement="bottom">
        <theme-picker class="theme-switch right-menu-item"></theme-picker>
      </el-tooltip>
@@ -21,8 +29,8 @@
          <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
          <i class="el-icon-caret-bottom"></i>
        </div>
-        <el-dropdown-menu class="user-dropdown" slot="dropdown">
-          <router-link class="inlineBlock" to="/">
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/">
            <el-dropdown-item>
              首页
            </el-dropdown-item>
@@ -41,10 +49,6 @@
  </el-menu>
 </template>

-
-
-
-
 <script>
 import { mapGetters } from 'vuex'
 import Levelbar from './Levelbar'
@@ -71,13 +75,22 @@ export default {
    ...mapGetters([
      'sidebar',
      'name',
-      'avatar'
+      'avatar',
+      'language'
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
+    handleSetLanguage(lang) {
+      this.$i18n.locale = lang
+      this.$store.dispatch('setLanguage', lang)
+      this.$message({
+        message: 'switch language success',
+        type: 'success'
+      })
+    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()// 为了重新实例化vue-router对象 避免bug
@@ -115,6 +128,14 @@ export default {
    .screenfull {
      height: 20px;
    }
+    .international{
+      vertical-align: top;
+      .international-icon{
+        font-size: 20px;
+        cursor: pointer;
+        vertical-align: -5px;
+      }
+    }
    .theme-switch {
      vertical-align: 15px;
    }
--- a/src/views/layout/components/SidebarItem.vue
+++ b/src/views/layout/components/SidebarItem.vue
@@ -5,14 +5,14 @@
      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key='item.children[0].name'>
        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
          <svg-icon v-if='item.children[0].meta&&item.children[0].meta.icon' :icon-class="item.children[0].meta.icon"></svg-icon>
-          <span>{{item.children[0].meta?item.children[0].meta.title:'no title'}}</span>
+          <span>{{item.children[0].meta?generateTitle(item.children[0].meta.title):'no title'}}</span>
        </el-menu-item>
      </router-link>

      <el-submenu :index="item.name" v-if="item.children&&item.children.length>1&&!item.hidden" :key='item.name'>
        <template slot="title">
          <svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
-          <span>{{item.meta?item.meta.title:'no title'}}</span>
+          <span>{{item.meta?generateTitle(item.meta.title):'no title'}}</span>
        </template>
        <template v-for="child in item.children" v-if='!child.hidden'>

@@ -21,7 +21,7 @@
          <router-link v-else :to="item.path+'/'+child.path" :key='child.name'>
            <el-menu-item :index="item.path+'/'+child.path">
              <svg-icon v-if='child.meta&&child.meta.icon' :icon-class="child.meta.icon"></svg-icon>
-              <span v-if='child.meta' >{{child.meta.title}}</span>
+              <span v-if='child.meta' >{{generateTitle(child.meta.title)}}</span>
            </el-menu-item>
          </router-link>

@@ -39,6 +39,11 @@ export default {
    routes: {
      type: Array
    }
+  },
+  methods: {
+    generateTitle(title) {
+      return this.$t('route.' + title)
+    }
  }
 }
 </script>