共计 1406 个字符,预计需要花费 4 分钟才能阅读完成。
实习参加的第一个需要就是页面国际化,看代码感觉贼简略后果一上手 bug 满天飞,而且一种解决方案往往只实用于一个类型的组件或者数据,换一个类型又得从新想方法……特此记录一下这些解决方案
1. 根本解决方案
参考:www.jianshu.com/p/71e9073df…
我的项目用的是 ant-design-vue + vue-i18n,配置好后将文本替换成 {{$t(‘your name.your key’}} 就能解决最根本的页面文字国际化问题,ant 组件自带文字会主动进行语言切换。
2. Table 表格表头数据解决方案
我的项目需要的第一个难题,表头的数据是写在 data 里的,把下面的办法硬塞进表头数据里是不会进行中英切换的,官网给出的解决办法是把数据放进 computed 中,但我的项目数据是曾经写好了的,我要是瞎挪弄出一堆 bug,组里的人预计会把我吊起来打,最初还是用的监听中英按钮切换而后刷新表头数据的办法。
首先要把切换的值传到对应页面里
changeLocale (localeval) {
this.localeval = localeval
if (localeval === EN) {moment.locale(EN)
this.$i18n.locale = EN
this.$bus.$emit('changeLocale', 'en-us')// 组件传值
} else {moment.locale(ZH)
this.$i18n.locale = ZH
this.locale = zhCN
this.$bus.$emit('changeLocale', 'zh-cn')// 组件传值 }
}
对应页面承受数据:
mounted() {this.$bus.$on('changeLocale', (param) => {console.log("接管到的值是",param)
})
}
而后写刷新表格数据的办法:
methods(){init() {this.initTable()
},
initTable() {const tables = ['tableColumns']
const allTitle = {
tableColumns: [
{title: this.$t('title.one'), // 表头对应的数据
},
{title: this.$t('title.two'),
},
{title: this.$t('title.three'),
},
{title: this.$t('title.four'),
},
]
}
for (let i = 0; i < tables.length; i++) {const line = tables[i] // 用来寻找对应的数据
this[line] = allTitle[line]
}
}
}
切换时调用就行了
mounted() {this.$bus.$on('changeLocale', (param) => {this.initTable()
})
this.init() // 初始化数据}
3. 带单元格编辑性能的表格解决方案
解决了表头没想到表格里竟然还有要翻译的
如果表格是依照 ant 官网给的写法就很好办了,间接把对应文字替换就行
<a href="javascript:;">{{$t('table.Delete'}}</a>
然而他们把这个字段也写在 data 里了……于是数据又不会变了,塞得还是 html 这下 $t 符齐全没用了,只能在刷新数据时用 if 判断而后输入对应语言了
办法跟下面差不多 加个判断就行了
—— 继续更新 ——
正文完