LocaleProvider 国际化

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

使用

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

  1. <template>
  2. <a-locale-provider :locale="zh_CN">
  3. <App />
  4. </a-locale-provider>
  5. </template>
  6. <script>
  7. import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
  8. import moment from 'moment';
  9. import 'moment/locale/zh-cn';
  10. moment.locale('zh-cn');
  11. export default {
  12. data() {
  13. return {
  14. zh_CN,
  15. };
  16. },
  17. };
  18. </script>

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

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

  1. <template>
  2. <a-locale-provider :locale="locales.en_US">
  3. <App />
  4. </a-locale-provider>
  5. </template>
  6. <script>
  7. const { LocaleProvider, locales } = window.antd;
  8. </script>

增加语言包

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

其他国际化需求

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

代码演示

  • LocaleProvider国际化 - 图1
  • 1
  • 2
  • 3
  • 4
  • 5
  • LocaleProvider国际化 - 图2
  • 10 条/页

    LocaleProvider国际化 - 图3

国际化

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

  1. <template>
  2. <a-locale-provider :locale="zhCN">
  3. <a-pagination :default-current="1" :total="50" show-size-changer />
  4. </a-locale-provider>
  5. </template>
  6. <script>
  7. // you should use import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
  8. import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
  9. export default {
  10. data() {
  11. return {
  12. zhCN,
  13. };
  14. },
  15. };
  16. </script>

LocaleProvider国际化 - 图4

所有组件

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

  1. <template>
  2. <div>
  3. <div class="change-locale">
  4. <span :style="{ marginRight: '16px' }">Change locale of components: </span>
  5. <a-radio-group :default-value="null" @change="changeLocale">
  6. <a-radio-button key="en" :value="null">
  7. English
  8. </a-radio-button>
  9. <a-radio-button key="cn" :value="zhCN">
  10. 中文
  11. </a-radio-button>
  12. </a-radio-group>
  13. </div>
  14. <a-locale-provider :locale="locale">
  15. <div :key="(!!locale).toString()" class="locale-components">
  16. <!-- HACK: just refresh in production environment-->
  17. <div class="example">
  18. <a-pagination :default-current="1" :total="50" show-size-changer />
  19. </div>
  20. <div class="example">
  21. <a-select show-search style="width: 200px">
  22. <a-select-option value="jack">
  23. jack
  24. </a-select-option>
  25. <a-select-option value="lucy">
  26. lucy
  27. </a-select-option>
  28. </a-select>
  29. <a-date-picker />
  30. <a-time-picker />
  31. <a-range-picker style=" width: 200px " />
  32. </div>
  33. <div class="example">
  34. <a-button type="primary" @click="showModal">
  35. Show Modal
  36. </a-button>
  37. <a-button @click="info">
  38. Show info
  39. </a-button>
  40. <a-button @click="confirm">
  41. Show confirm
  42. </a-button>
  43. <a-popconfirm title="Question?">
  44. <a href="#">Click to confirm</a>
  45. </a-popconfirm>
  46. </div>
  47. <div className="example">
  48. <a-transfer
  49. :data-source="[]"
  50. show-search
  51. :target-keys="[]"
  52. :render="item => item.title"
  53. />
  54. </div>
  55. <div :style="{ width: '319px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
  56. <a-calendar :fullscreen="false" :value="moment()" />
  57. </div>
  58. <a-modal v-model="visible" title="Locale Modal">
  59. <p>Locale Modal</p>
  60. </a-modal>
  61. </div>
  62. </a-locale-provider>
  63. </div>
  64. </template>
  65. <script>
  66. // you should use import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
  67. import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
  68. import { Modal } from 'ant-design-vue';
  69. import moment from 'moment';
  70. import 'moment/locale/zh-cn';
  71. moment.locale('en');
  72. const columns = [
  73. {
  74. title: 'Name',
  75. dataIndex: 'name',
  76. filters: [
  77. {
  78. text: 'filter1',
  79. value: 'filter1',
  80. },
  81. ],
  82. },
  83. {
  84. title: 'Age',
  85. dataIndex: 'age',
  86. },
  87. ];
  88. export default {
  89. data() {
  90. return {
  91. visible: false,
  92. locale: null,
  93. zhCN,
  94. };
  95. },
  96. methods: {
  97. moment,
  98. showModal() {
  99. this.visible = true;
  100. },
  101. hideModal() {
  102. this.visible = false;
  103. },
  104. info() {
  105. Modal.info({
  106. title: 'some info',
  107. content: 'some info',
  108. });
  109. },
  110. confirm() {
  111. Modal.confirm({
  112. title: 'some info',
  113. content: 'some info',
  114. });
  115. },
  116. changeLocale(e) {
  117. const localeValue = e.target.value;
  118. this.locale = localeValue;
  119. if (!localeValue) {
  120. moment.locale('en');
  121. } else {
  122. moment.locale('zh-cn');
  123. }
  124. },
  125. },
  126. };
  127. </script>
  128. <style scoped>
  129. .locale-components {
  130. border-top: 1px solid #d9d9d9;
  131. padding-top: 16px;
  132. }
  133. .example {
  134. margin: 16px 0;
  135. }
  136. .example > * {
  137. margin-right: 8px;
  138. }
  139. .change-locale {
  140. margin-bottom: 16px;
  141. }
  142. </style>

API

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