-
客服电话
-
APP下载
迪恩网络APP
随时随地掌握行业动态
-
官方微信
扫描二维码
关注迪恩网络微信公众号
客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：i18n-chain开源软件地址：https://gitee.com/fwh1990/i18n-chain开源软件介绍：说到国际化，你是否也常年奔波于复制粘贴的重复劳动里？像 我更喜欢有提示的代码，利用 兼容性
定义本地化文件// ./src/i18n/locales/en.tsconst en = { button: { submit: 'Submit', cancel: 'Go back', }, user: { profile: 'Tom', },};export default en;export type Locale = typeof en;// ./src/i18n/locales/zh.tsimport { Locale } from './en';const zh: Locale = { button: { submit: '提交', cancel: '返回', }, user: { profile: '原罪', },};export default zh;创建i18n实例// ./src/i18n/index.tsimport { createI18n } from '@i18n-chain/*';import en from './locales/en';const i18n = createI18n({ defaultLocale: { key: 'en', values: en, },});export default i18n;导入语言第一种, 直接定义： import { createI18n } from '@i18n-chain/*';import zh from './locales/zh';const i18n = createI18n({ defaultLocale: { ... },});i18n._.define('zh', zh);export default i18n;第二种, 异步导入。当组件检测到语言未定义时，会自动触发 const i18n = createI18n({ defaultLanguage: { ... }, loader: (name) => import('./locales/' + name),});export default i18n;切换语言i18n._.locale('zh');调用字符串你可以随意地切换 带参数的模板当你想用参数的时候，你需要把模板写成数组的形式 const en = { property: ['{{property1}}template{{property2}}', { property1: value2, property2: value2 }],};数组第二个元素就是参数列表以及，你可以设置参数的默认值。 const en = { user: { profile: [ 'My name is {{name}}, I born in {{country}}, I am {{age}} old now, my birthday is {{birthday}}', { country: undefined, name: 'Tom', age: (value: number = 20) => { if (value <= 1) { return `${value} year`; } else { return `${value} years`; } }, birthday: (value: Date) => { return value.toString(); }, }, ], },};////////////////////////////////////// 上面的代码可以自动推导出和下面一致的类型：interface User { Profile { country: string | number; name?: string; age?: number; birthday: Date; }}/////////////////////////////////////// 最小化调用i18n.user.profile({ age: 20, country: 'China',});// 增加可选的属性：`name`i18n.user.profile({ age: 30, country: 'Usa', name: 'Lucy',});方法参数 普通参数如果没有默认值，需要设置成 const en = { template: ['Hello, {{world}}', { world: undefined }]};更多使用方法
案例 |
请发表评论