ant

2023-09-08 12:50| 来源: 网络整理| 查看: 265

ant-design国际化目前支持66中语言。

如果刚好要用的语言它不存在，我们可以参考node_modules中的语言自己写一套组件的翻译。

下面以缅甸语为例子。

引入vue-i18n：npm install vue-i18n

main.js

import i18n from './common/lang' //i18n createApp(App).use(i18n).mount('#app')

App.vue

import ant_lang from "@/common/lang/ant_lang_file"; export default { data() { return { isRefresh: true,//用于刷新 locale: "",//ant-design国际化 }; }, provide() { return { reload: this.reload, }; }, computed: {}, created() { this.getLocale(); }, methods: { reload() { this.getLocale(); this.isRefresh = false; this.$nextTick(() => { this.isRefresh = true; }); }, //获取缓存的语言类型 getLocale() { let lang = ant_lang[localStorage.getItem("language")] || ant_lang["zh-CN"]; this.locale = lang; }, }, };

创建语言工具包

index.js用于翻译业务上的语言

// index.js import { createI18n } from 'vue-i18n' import enLocale from './en_US' import zhLocale from './zh_CN' import thLocale from './th_TH' import myLocale from './my_MM' const messages = { "en-US": { ...enLocale }, "zh-CN": { ...zhLocale }, "th-TH": { ...thLocale }, "my-MM": { ...myLocale } } const i18n = createI18n({ legacy: false, globalInjection: true, locale: localStorage.getItem('language') || 'zh-CN', messages: messages, }); export default i18n

zh_CN.json为例其他几个JSON语言包都是map对象只是翻译的语言不同

ant_lang_file.js用于翻译ant_design组件的文件，因为缅甸语ant_design组件也不支持，所以得自己跟着node_modules的来写一套缅甸语的组件翻译。

import antEnLocale from 'ant-design-vue/es/locale/en_US' import antZhLocale from 'ant-design-vue/es/locale/zh_CN' import antThLocale from 'ant-design-vue/es/locale/th_TH' import antMyLocale from './ant_exten_lang/es/local/my_MM' export default { "en-US": antEnLocale, //英语 "zh-CN": antZhLocale, //泰语 "th-TH": antThLocale, //中文 "my-MM": antMyLocale, //缅甸语言 }

以中文为准，从node_modules\ant-design-vue\es\locale目录下copy一套中文的改成缅甸语就可以了，路径都改成自己的。

node_modules\ant-design-vue\es\locale\zh_CN.js

copy的zh_CN改成了my_MM缅甸语

弄完这些文件后就OK可以使用了

效果图：

【本文地址】

公司简介

联系我们