非常教程

iView UI参考手册

组件

国际化

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

在 Webpack 中使用

完整引入 iView

import Vue from 'vue';
import iView from 'iview';
import locale from 'iview/dist/locale/en-US';

Vue.use(iView, { locale });

按需引入 iView

import Vue from 'vue';
// importing iView on demand
import { locale, Page } from 'iview';
import lang from 'iview/dist/locale/en-US';

// configure language
locale(lang);

// import components
Vue.component('Page', Page);

兼容 vue-i18n@6.x+

import Vue from 'vue';
import iView from 'iview';
import VueI18n from 'vue-i18n';
import en from 'iview/dist/locale/en-US';
import zh from 'iview/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(iView);
Vue.locale = () => {};

const messages = {
    en: Object.assign({ message: 'hello' }, en),
    zh: Object.assign({ message: '你好' }, zh)
};

// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: 'en',  // set locale
    messages  // set locale messages
});

new Vue({ i18n }).$mount('#app');

兼容 vue-i18n@5.x

import Vue from 'vue';
import iView from 'iview';
import VueI18n from 'vue-i18n';
import en from 'iview/dist/locale/en-US';
import zh from 'iview/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(iView);

Vue.config.lang = 'en-US';
Vue.locale('en-US', en);
Vue.locale('zh-CN', zh);

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

通过 CDN 使用

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="//unpkg.com/iview/dist/locale/en-US.js"></script>

<script>
    iview.lang('en-US');
</script>

结合 vue-i18n 使用

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="//unpkg.com/iview/dist/locale/en-US.js"></script>
<script src="//unpkg.com/iview/dist/locale/zh-CN.js"></script>

<script>
    // you need to add Polyfill if your browser doesn't support ES2015
    Vue.locale = () => {};
    const messages = {
        en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
        zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    };

    const i18n = new VueI18n({
      locale: 'en', // set locale
      messages // set locale messages
    })
    
    new Vue({
        el: '#app',
        i18n: i18n
    })
</script>

支持的语言

iView 目前已支持以下语言:

  • 简体中文(zh-CN)
  • 繁体中文(zh-TW)
  • 英文(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)

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

iView UI

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品

iView UI目录

1.指南
2.组件
3.组件基础
4.组件布局