国际化

View UI(iView) 的所有组件文案默认使用的是中文,通过设置可以使用其它语言。

在 Webpack 中使用

完整引入 iView

  1. import Vue from 'vue';
  2. import ViewUI from 'view-design';
  3. import locale from 'view-design/dist/locale/en-US';
  4. Vue.use(ViewUI, { locale });

按需引入 iView

  1. import Vue from 'vue';
  2. // importing ViewUI on demand
  3. import { locale, Page } from 'view-design';
  4. import lang from 'view-design/dist/locale/en-US';
  5. // configure language
  6. locale(lang);
  7. // import components
  8. Vue.component('Page', Page);

兼容 vue-i18n@6.x+

  1. import Vue from 'vue';
  2. import ViewUI from 'view-design';
  3. import VueI18n from 'vue-i18n';
  4. import en from 'view-design/dist/locale/en-US';
  5. import zh from 'view-design/dist/locale/zh-CN';
  6. Vue.use(VueI18n);
  7. Vue.use(ViewUI);
  8. Vue.locale = () => {};
  9. const messages = {
  10. en: Object.assign({ message: 'hello' }, en),
  11. zh: Object.assign({ message: '你好' }, zh)
  12. };
  13. // Create VueI18n instance with options
  14. const i18n = new VueI18n({
  15. locale: 'en', // set locale
  16. messages // set locale messages
  17. });
  18. new Vue({ i18n }).$mount('#app');

兼容 vue-i18n@5.x

  1. import Vue from 'vue';
  2. import ViewUI from 'view-design';
  3. import VueI18n from 'vue-i18n';
  4. import en from 'view-design/dist/locale/en-US';
  5. import zh from 'view-design/dist/locale/zh-CN';
  6. Vue.use(VueI18n);
  7. Vue.use(ViewUI);
  8. Vue.config.lang = 'en-US';
  9. Vue.locale('en-US', en);
  10. Vue.locale('zh-CN', zh);

使用 vue-i18n 时,也可以按需引入 iView 组件,用法与上面的示例类似。

通过 CDN 使用

  1. <script src="//unpkg.com/vue"></script>
  2. <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
  3. <script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
  4. <script>
  5. iview.lang('en-US');
  6. </script>

结合 vue-i18n 使用

  1. <script src="//unpkg.com/vue"></script>
  2. <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
  3. <script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
  4. <script src="//unpkg.com/view-design/dist/locale/zh-CN.js"></script>
  5. <script>
  6. // you need to add Polyfill if your browser doesn't support ES2015
  7. Vue.locale = () => {};
  8. const messages = {
  9. en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
  10. zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
  11. };
  12. const i18n = new VueI18n({
  13. locale: 'en', // set locale
  14. messages // set locale messages
  15. })
  16. new Vue({
  17. el: '#app',
  18. i18n: i18n
  19. })
  20. </script>

支持的语言

iView 目前已支持以下语言:

  • 简体中文(zh-CN)
  • 繁体中文(zh-TW)
  • 维吾尔语(zh-UG)
  • 英文(en-US)
  • 土耳其语(tr-TR)
  • 西班牙语(es-ES)
  • 日语(ja-JP)
  • 俄语(ru-RU)
  • 法语(fr-FR)
  • 德语(de-DE)
  • 巴西葡萄牙语(pt-BR)
  • 葡萄牙语(pt-PT)
  • 韩语(ko-KR)
  • 越南语(vi-VN)
  • 瑞典语(sv-SE)
  • 印尼语(id-ID)
  • 乌克兰语(uk-UA)
  • 意大利语(it-IT)
  • 泰语(th-TH)
  • 印地语(hi-IN)
  • 波斯语(fa-IR)
  • 罗马尼亚语(ro-RO)
  • 希腊语(el-GR)
  • 荷兰语(nl-NL)
  • 捷克语(cs-CZ)
  • 蒙古语(mn-MN)
  • 传统蒙古语(mn-TR)
  • 芬兰语(fi-FI)
  • 阿拉伯语(ar-SA)
  • 阿拉伯语-埃及(ar-EG)
  • 丹麦语(da-DK)
  • 波兰语(pl-PL)
  • 挪威语(nb-NO)

欢迎贡献代码,以支持更多语言。只需在这里添加一个语言配置文件即可。