Appearance
国际化
fast-crud
的国际化使用vue-i18n-next
配置非常简单,只需use时传入i18n对象即可
app.use(FastCrud, { i18n } )
WARNING
1.13以上版本已经无需引入fs的国际化配置文件
过时内容,已折叠
步骤
1. createI18n
引入fast-crud
的国际化文件,实例化i18n
对象
js
import enFsLocale from "@fast-crud/fast-crud/dist/locale/lang/en";
import zhFsLocale from "@fast-crud/fast-crud/dist/locale/lang/zh-cn";
import { createI18n } from "vue-i18n";
const messages = {
[enLocale.name]: {
label: "English",
// fs 这个属性很关键,一定要保证有这个属性,
// 你也可以覆盖fs里面的值自定义相关文本
fs: enFsLocale.fs,
// 定义您自己的字典,但是请不要和 `fs` 重复,这样会导致内部组件的翻译失效.
m: en
},
[zhLocale.name]: {
label: "简体中文",
// 你也可以覆盖fs里面的值自定义相关文本
fs: zhFsLocale.fs,
// 定义您自己的字典,但是请不要和 `fs`重复,这样会导致内部组件的翻译失效.
m: zh
}
};
export default createI18n({
legacy: false,
locale: zhLocale.name,
fallbackLocale: enLocale.name,
messages
});
2. use时传入i18n对象
js
app.use(FastCrud, { i18n } )
覆盖默认i18n文本
有时候官方翻译的文本不符合你的需求,你可以通过覆盖默认文本来实现自定义文本
js
const messages = {
en: {
label: "English",
fs:{
//你要覆盖的配置
//配置结构请参考,https://github.com/fast-crud/fast-crud/blob/main/packages/fast-crud/src/locale/lang/en.ts
}
},
"zh-cn": {
label: "简体中文",
fs:{
//你要覆盖的配置
//配置结构请参考,https://github.com/fast-crud/fast-crud/blob/main/packages/fast-crud/src/locale/lang/zh-cn.ts
}
}
};
export default createI18n({
legacy: false,
locale: "zh-cn",
fallbackLocale: "zh-cn",
messages
});