LocaleProvider 国际化

为组件内建文案提供统一的国际化支持。

使用

LocaleProvider 使用 Vue 的 provide/inject 特性,只需在应用外围包裹一次即可全局生效。

<template>
  <a-locale-provider :locale="zh_CN">
    <App />
  </a-locale-provider>
</template>
<script>
import zh_CN from 'ui-vue-antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
export default {
  data() {
    return {
      zh_CN,
    }
  }
}
</script>

我们提供了英语,中文,俄语,法语,德语等多种语言支持,所有语言包可以在 这里 找到。

注意:如果你需要使用 UMD 版的 dist 文件,应该引入 antd/dist/antd-with-locales.js,同时引入 moment 对应的 locale,然后按以下方式使用:

<template>
  <a-locale-provider :locale="locales.en_US">
    <App />
  </a-locale-provider>
</template>
<script>
const { LocaleProvider, locales } = window.antd;
</script>

增加语言包

如果你找不到你需要的语言包,欢迎你在 英文语言包 的基础上创建一个新的语言包,并给我们 Pull Request。

其他国际化需求

本模块仅用于组件的内建文案,若有业务文案的国际化需求,建议使用 vue-i18n

代码演示

国际化

LocaleProvider 包裹你的应用,并引用对应的语言包。

Change locale of components:
~
Click to confirm
0 item
0 item
SuMoTuWeThFrSa
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10

所有组件

此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。

API

参数 说明 类型 默认值
locale 语言包配置,语言包可到 antd/lib/locale-provider/ 目录下寻找 object -