目录介绍启用方式使用App.ts配置在组件中使用getAllLocalesgetLocaleuseIntlsetLocale介绍 plugin-locale是一个国际化的插件,用于解
plugin-locale是一个国际化的插件,用于解决i18n问题,约定式的多语言支持,可以进行多个国际语言的切换
在umirc.ts文件中配置locale:{}开启
在src下创建一个locales文件夹,在文件夹下配置我们的语言文件
中文语言文件:zh-CN.js
export default {
WELCOME_TO_UMI_WORLD: '{name},欢迎光临umi的世界',
};
英文语言文件:en-US.js
export default {
WELCOME_TO_UMI_WORLD: "{name}, welcome to umi's world",
};
注意:如果项目配置了singular: true
,locales
要改成locale
import zhTW from 'antd/es/locale/zh_TW';
import {addLocale} from 'umi'
// 动态增加新语言
addLocale(
'zh-TW',
{
// id 列表
name: '妳好,{name}',
},
{
momentLocale: 'zh-tw',
antd: zhTW,
},
);
动态的增加语言,增加语言之后可以通过getAllLocales获取列表
addLocale 三个参数。
name
语言的 key。例如 zh-TWmessage
语言的 id 列表。 例如:{// id 列表 name: '妳好,{name}',}momentLocale
和antd
配置配置完以上代码之后,我们需要重新运行一下项目,页面可能会报一些红色波浪线错误,但不影响使用,原因是ts类型问题,如果不想报红色波浪线,可以在后面加上:any,这是最快的解决方案,但是一般不推荐使用
获取当前获得所有国际化文件的列表,默认会在locales
文件夹下寻找类似en-US.(js|JSON|ts)
文件
import { getAllLocales } from 'umi';
console.log(getAllLocales()); // [en-US,zh-CN,...]
获取当前选择的语言
import { getLocale } from 'umi';
console.log(getLocale()); // en-US | zh-CN
useIntl
是最常用的 api,它可以获得fORMatMessage
等 api 来进行具体的值绑定
import styles from './index.less';
import { getAllLocales } from 'umi';
import { useIntl} from 'umi';
export default function IndexPage() {
const intl = useIntl();
console.log(intl);
return (
<div className={styles.title}>
<h1>Page index</h1>
<div>{intl.messages.WELCOME_TO_UMI_WORLD}</div>
</div>
);
}
通过useIntl可以把我们的语言文件中内容渲染到页面
设置切换语言,默认会刷新页面,可以通过设置第二个参数为false
,来实现无刷新动态切换
import styles from './index.less';
import { getAllLocales } from 'umi';
import { useIntl, setLocale } from 'umi';
export default function IndexPage() {
const intl = useIntl();
console.log(intl);
console.log(getAllLocales()); // [en-US,zh-CN,...]
return (
<div className={styles.title}>
<h1>Page index</h1>
<div>{intl.messages.WELCOME_TO_UMI_WORLD}</div>
<button
onClick={() => {
setLocale('zh-CN', false);
}}
>
切换中文
</button>
<button onClick={() => {
setLocale('en-US', false);
}}>切换英文</button>
</div>
);
}
给定了两个button按钮,可以做语言的切换
以上是plugin-locale的简单操作,详情请查看umi官网@umijs/plugin-locale
到此这篇关于javascript @umijs/plugin-locale插件使用教程的文章就介绍到这了,更多相关JS @umijs/plugin-locale内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JavaScript@umijs/plugin-locale插件使用教程
本文链接: https://lsjlt.com/news/174313.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0