当前位置: 首页 > Web前端 > vue.js

Ant-design国际化解决方案实录

时间:2023-03-31 22:46:07 vue.js

实习参与的第一个要求就是页面国际化。看代码,我觉得是贼,但是一上手,bug无处不在,一个解决方案往往只适用于一类组件或数据。如果换个类型,又得重新考虑了。。。特此记录下这些解决方案1.基本解决方案参考:www.jianshu.com/p/71e9073df...项目使用ant-design-vue+vue-i18n,配置后将文本替换为{{$t('你的名字.你的key'}}即可解决最基本的页面文本国际化问题,ant组件自带的文本会自动切换语言。2.Table表头data解决方案项目需求第一个问题是headerdata写在data里,上面的方法如果强行写进headerdata就不会中英文切换,官方的解决方法是把dataincomputed,但是项目数据已经写入了,如果我乱搞一堆bug,群里估计会挂我打我,最后还是用monitor键切换中文和英文然后刷新headerdata.方法。首先要把切换值传给对应的页面bus.$emit('changeLocale','en-us')//组件传值}else{moment.locale(ZH)this.$i18n.locale=ZHthis.locale=zhCNthis.$bus.$emit('changeLocale','zh-cn')//组件传值}}对应页面接受数据:mounted(){this.$bus.$on('changeLocale',(param)=>{console.log("receivedvalueis",param)})}然后写刷新表数据的方法:methods(){init(){this.initTable()},initTable(){consttables=['tableColumns']constallTitle={tableColumns:[{title:this.$t('title.one'),//表头对应的数据},{title:this.$t('title.two'),},{title:this.$t('title.three'),},{title:this.$t('title.four'),},]}for(leti=0;i{this.initTable()})this.init()//初始化数据}3.具有单元格编辑功能的表格解决方案解决方案解决表头。没想到表里还有翻译。如果表格是按照ant官网写的,就好办了。只需替换相应的文本即可。{{$t('table.Delete'}}但是他们在data里也写了这个字段...所以data不会变,还是html.现在$t字符完全没用了,只能用在刷新数据的时候,用if判断,然后输出对应的语言,方法和上面差不多,只是加了个判断------持续更新------