开发使用

在 TechUI 中，多语言功能通过全局服务注入的 i18n 函数来实现。您可以在组件的 setup 语法糖中轻松获取并使用它。

基础调用

注入函数

首先，从 $global 中解构出 i18n 方法。

import { inject } from 'vue';

const { i18n } = inject('$global');

获取静态文本

使用点号 (.) 分隔的路径字符串来访问语言包中的特定文本。

在 Script 中使用：

const title = i18n('controlPanel.title'); 
// 输出: "控制面板" (在中文环境下)

在 Template 中使用：

<template>
  <TuiButton>
    {{ i18n('universal.confirm') }}
  </TuiButton>
  
  <p class="tip">
    {{ i18n('login.tips.register') }}
  </p>
</template>

动态插值

当翻译文本中包含动态变量时，i18n 函数支持传入第二个参数对象进行替换。

定义格式

在语言包文件中，变量使用 ${变量名} 的格式定义：

// 语言包定义示例
{
  "panicAlert": {
    "device": {
      "content": "此页面为 ${deviceA} 端专属，当前访问设备为 ${deviceB}..."
    }
  }
}

调用示例

调用时，传入一个包含对应键值对的对象：

const alertMessage = i18n('panicAlert.device.content', {
  deviceA: 'PC',
  deviceB: 'Mobile'
});

// 输出: "此页面为 PC 端专属，当前访问设备为 Mobile..."

调试工具

在开发过程中，如果遇到翻译不显示或 Key 值查找困难的情况，可以使用 TechUI 提供的调试工具函数 tConsolei18n。

该函数主要用于在浏览器控制台输出调试信息，帮助开发者确认：

1. 当前的 Key 是否存在。
2. 当前加载的语言包数据是否正确。
3. 插值参数是否正确解析。

import { inject } from 'vue';

const { tConsolei18n } = inject('$global');

// 在控制台打印特定 Key 的翻译详情
tConsolei18n('navTab.menu.close');

常见问题

Q: 如果 Key 不存在会显示什么？A: 如果传入的 Key 在当前语言包中找不到对应的定义，i18n 函数默认会直接返回该 Key 字符串本身（例如返回 "unknown.key.path"），以便于开发者快速发现遗漏的翻译项。

Q: 是否支持 HTML 标签？A: i18n 函数返回的是纯字符串。如果您需要在翻译中包含 HTML（如加粗或换行），请使用 Vue 的 v-html 指令，但请务必确保翻译内容的安全性，防止 XSS 攻击。

<span v-html="i18n('some.rich.text')"></span>