## 国际化

目前支持英文（en） 中文简体（zh-CN） 中文繁体（zh-TW）三种国际化资源。 需要支持其他的国际化资源，可自行扩展。使用方式 需要引入 swordpaas-ui 的国际化资源整合到项目中，项目需要整合 vue-i18n 示例代码如下:

### 1、入口 main.js

入口中引入 locale/index.js 中的 i18n，并注册。

```
import Vue from "vue";
import ElementUI from "element-ui";
import SwordUi from "swordpaas-ui";
import i18n from '@/locale/index.js';

Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value),
    size: "small"
});
Vue.use(SwordUi, {
    i18n: (key, value) => i18n.t(key, value)
});

let app = new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount("#app");

```

### 2、locale/index.js 文件

此文件中引入了 element-ui、swordpaas-ui 和本地代码(./lang)中注册过的需要转换语言的 文字内容，放到 messages 变量中，然后使用 new VueI18n 方法，生成了 i18n 实例导出，在第一步中 main.js 中引入的就是此处的 i18n 实例。

```
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementZhTWLocale from 'element-ui/lib/locale/lang/zh-TW'// element-ui lang

import swordEnLocale from 'swordpaas-ui/src/locale/lang/en' // swordpaas-ui lang
import swordZhLocale from 'swordpaas-ui/src/locale/lang/zh-CN'// swordpaas-ui lang
import swordZhTWLocale from 'swordpaas-ui/src/locale/lang/zh-TW'// swordpaas-ui lang

import enLocale from './lang/en'
import zhLocale from './lang/zh-CN'
import zhTWLocale from './lang/zh-TW'

Vue.use(VueI18n)
const messages = {
  "en-US": {
    ...enLocale,
    ...elementEnLocale,
    ...swordEnLocale,

  },
  "zh-CN": {
    ...zhLocale,
    ...elementZhLocale,
    ...swordZhLocale
  },
  "zh-TW": {
    ...zhTWLocale,
    ...elementZhTWLocale,
    ...swordZhTWLocale
  }
}

const i18n = new VueI18n({
  // set locale
  // options: en | zh
  locale: localStorage.getItem("lang") || 'zh-CN',
  // set locale messages
  messages
})

export default i18n
```

### 3、定义本地的 lang 文件夹中需要国际化的内容

自己在项目中创建 lang 文件夹，文件夹中建三个文件分别为 en.js(英文)、zh-CN(中文)、zh-TW(中文繁体)，这三个文件就是在第二步骤中 locale/index.js 中需要引入的文件，文件内容如下 demo：

```
// 英文 en.js
export default {
  common:{
    search: 'search',
    reset: 'reset',
    save: 'save',
    cancel: 'cancel',
    up: 'up',
    down: 'down',
    remove: 'remove',
    clear: 'clear',
    index: 'index',
    selected: 'selected'
  },
  selectLang:{
    switchLang: 'switch lang'
  }
};
```

```
// 中文 zh-CN.js
export default {
  common: {
    search: '查询',
    reset: '重置',
    save: '保存',
    cancel: '取消',
    up: '上移',
    down: '下移',
    remove: '删除',
    clear: '清空',
    index: '序号',
    selected: '已选择'
  },
  selectLang: {
    switchLang: '切换语言'
  }
};
```

```
// 中文繁体 zh-TW.js
export default {
  common:{
    search: '查詢',
    reset: '重置',
    save: '保存',
    cancel: '取消',
    up: '上移',
    down: '下移',
    remove: '刪除',
    clear: '清空',
    index: '序號',
    selected: '已選擇'
  },
  selectLang:{
    switchLang: '切換語言'
  }
};
```

### 4、页面中使用

使用$t 方法，传入需要使用的路径参数，路径参数是在第三步中文件中定义好的路径。

```
// html:
<p>{{$t('common.search')}}</p> // 查询
```

### 5、切换语言

改变 this.$i18n.locale 来切换语言。

```
// js切换语言
data() {
  return {
    lang: 'zh-CN'
  }
},
methods: {
  switchLang()  {
    this.$i18n.locale = this.lang
  }
}
```
