本地化

mdui 内部默认使用英文，如果需要使用其他语言，则需要进行多语言配置。

使用方法

mdui 提供了三个函数来实现多语言功能：

• loadLocale：加载语言包。参数为一个函数，接收一个语言代码作为参数，返回 Promise，当语言包加载完成时，Promise 被 resolve 为对应的语言包。请确保在项目的入口文件中调用该函数。
• setLocale：切换到指定的语言。参数为新的语言代码，返回 Promise，在新的语言包加载完成后 resolve。
• getLocale：获取当前的语言代码。

使用示例如下：

import { loadLocale } from 'mdui/functions/loadLocale.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { getLocale } from 'mdui/functions/getLocale.js';

// 在项目入口处调用 loadLocale 加载语言包
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// 在需要切换语言时调用该函数。在 Promise resolve 后，语言切换成功
setLocale('zh-cn').then(() => {
  // 调用 getLocale 可获取当前的语言代码
  console.log(getLocale()); // zh-cn
});

状态事件

在语言切换的开始、结束、失败时，会在 window 上触发 mdui-localize-status 事件，你可以监听该事件来执行自定义操作，例如在语言切换成功后将语言代码写入 Cookie。

事件的 detail.status 属性描述了当前发生了何种状态的变更，可能的值包括：loading、ready、error：

使用示例如下：

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(`开始加载新的语言包：${event.detail.loadingLocale}`);
  } else if (event.detail.status === 'ready') {
    console.log(`新语言包 ${event.detail.readyLocale} 加载成功`);
  } else if (event.detail.status === 'error') {
    console.error(
      `新语言包 ${event.detail.errorLocale} 加载失败：${event.detail.errorMessage}`,
    );
  }
});

语言包加载方式

懒加载

使用动态导入可以在切换到对应语言时，才下载对应的语言包。这是最为推荐的方法。

import { loadLocale } from 'mdui/functions/loadLocale.js';

loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

预加载

在页面加载时，先下载好所有需要的语言包。这使得在切换语言时，无需再进行下载，从而使切换语言更加快速。

import { loadLocale } from 'mdui/functions/loadLocale.js';

const localizedTemplates = new Map([
  ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)],
  ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)],
]);

loadLocale(async (locale) => localizedTemplates.get(locale));

静态导入

使用该方法可以把所有需要的语言包和你的项目代码打包到同一个文件里，不再需要单独下载语言包。

import { loadLocale } from 'mdui/functions/loadLocale.js';
import * as locale_zh_cn from 'mdui/locales/zh-cn.js';
import * as locale_zh_tw from 'mdui/locales/zh-tw.js';

const localizedTemplates = new Map([
  ['zh-cn', locale_zh_cn],
  ['zh-tw', locale_zh_tw],
]);

loadLocale(async (locale) => localizedTemplates.get(locale));

通过 CDN 加载语言包

如果你是通过 CDN 来使用 mdui 的，可以直接从 CDN 加载语言包。使用示例如下：

<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

<script>
  mdui.loadLocale(
    (locale) => import(`https://unpkg.com/mdui@2/locales/${locale}.js`),
  );
  mdui.setLocale('zh-cn');
</script>

支持的语言

目前，mdui 支持以下语言：

提交新的翻译

要贡献新的翻译、或对现有翻译进行改进，请在 Github 上发起一个 Pull Request。语言包位于 packages/mdui/src/xliff，你可以直接在 Github 上进行编辑。