国际化是大多后数后台项目所必须的一项功能。antd的国际化做起来也不会太难。与element类似,同样是使用官方适配的国际化组件和配合vue-i18n来实现业务。在这里vue-i18n就不做过多的赘述了,讲讲后台管理系统如何做组件国际化。项目在线地址 (有用的话,记得给个start哦)
按照官方文档: LocaleProvider 使用 Vue 的 provide/inject 特性,只需在应用外围包裹一次即可全局生效。即把需要做住国际化的组件使用 ‘a-locale-provider’ 标签包裹起来即可。但是这里会有一个问题,控制台会报warning:
这个warning的意思是LocaleProvider的a-local-provider已经弃用了,我们需要使用a-config-provider将其替换就好了。
为了减少不必要的麻烦(一次性包裹所有组件)我们只需要需要把App组件包裹起来就ok了。
<a-locale-provider :locale="locale">
<div id="app">
<router-view />
</div>
</a-locale-provider>
按照官方文档说明,默认是英文,所以local的初始值(默认值)可以设为null,如果默认使用中文,直接按照官方文档来操作即可。
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('en')
文章进行到这里,如果所有都按照官方文档来那就没必要写此篇博客了。上文说到,我们在App组件使用‘a-locale-provider’标签将所有组件包裹起来。为了配合vue-i18n当然还需要进行一些配置的。
我们在切换语言的时候,肯定要对组件也进行相应的切换,在这个项目里,我使用$bus来进行组件间的通信(语言切换封装成一个组件,切换的时候通知App组件进行相应的切换即可)
// langSelect(语言选择组件)发送通知改变当前语言
this.$bus.$emit('change-language')
// App组件初始化语言及接收通知做初始化
mounted() {
if (this.language === 'zh-cn') this.locale = this.zhCN
else this.locale = null
moment.locale(this.language)
this.$bus.$on('change-language', async() => {
var language = await this.$store.getters.language
if (language === 'zh-cn') this.locale = this.zhCN
else this.locale = null
const languageList = ['en', 'zh-cn']
if (languageList.includes) {
moment.locale(language)
}
})
}
除此之外,我们还需监听language的变化进行同步修改
watch: {
language: {
handler: function(val, oldval) {
moment.locale(val)
},
deep: true
}
}