文档

<T> 组件

将您的内容包装在 <T> 组件中进行翻译。在翻译加载之前，会显示原始内容。

<T>This content will be translated</T>

带有绑定的文本也可以。每当内容发生变化时，例如当 name 更改时，内容都会再次翻译：

<T>Hello {{ name }}</T>

对于经常更改的值，例如名称和计数，请改用变量，因此文本只能翻译一次。

同时请求的所有翻译都将通过单个请求发送到 API，并缓存翻译。你可以随心所欲地使用任意数量的 <T> 组件。

该插件在全球范围内注册 <T>。你也可以将其导入：import { T } from '@magic-translate/vue'.Translate 与 T 是同一个组件。

Props

Prop类型描述
formality'informal' | 'formal'设置翻译的形式。
idstring允许您自行编辑文本的这种用法。
langLanguage用 createMagicTranslate 覆盖语言集。
vRecord<string, unknown>未翻译的值，在内容中以 $name 的形式引用。参见变量。
<T lang="fr" formality="formal">How are you?</T>

变量

在 v 中传递更改的值，例如名称或计数，并在内容中将其引用为 $name：

<T :v="{ name: user.name, count }">Hi $name, you have $count new messages</T>

Magic Translate 一次将值周围的文本翻译为 Hi {0}, you have {1} new messages，然后将这些值放回您的应用程序中。翻译已缓存，适用于每个名称和每个计数，并且值本身永远不会发送到 Magic Translate。当只有值发生变化时，不会提出新的请求。

这些值按其首次出现的顺序进行编号。翻译可以将它们移动到语言需要的任何地方，例如 {1} neue Nachrichten für {0}。值周围的文本可以包含 HTML：

<T :v="{ count: cart.items.length }">You have <b>$count items</b> in your cart.</T>

一些规则：

  • 只有 v 的密钥会被替换，因此 $5 之类的文本保持原样。如果两个密钥以相同的方式启动，例如 count 和 counts，则最长的那个获胜。
  • 同一个名称可以出现多次。
  • 值以文本形式插入，而不是以 HTML 形式插入。改为在它们周围的文本中加上标记：Hi <b>$name</b>.
  • 变量只能在文本中替换，不在诸如 href 或 title 之类的属性中替换。
  • 文本中未出现的按键会记录警告，这会发现错别字。
  • 使用服务器端渲染，例如使用 Nuxt，带有 v 的 <T> 在服务器上呈现为空，并在应用程序在浏览器中运行后出现。

局限性

  1. 你不能将 Vue 组件放在 <T> 组件中。纯 HTML 元素很好（参见下面的示例），作用域样式可以继续使用它们。
  2. <T> 组件中的内容不能超过 10 KB，也就是大约 5,000 个字符。
<!-- this is OK, since <a> is a plain HTML element -->
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>


<!-- this does NOT work, since <MyButton> is a Vue component -->
<T>
  <MyButton>Click me</MyButton>
</T>

要翻译属性和其他字符串，请使用 useTranslate composable。

以前Vue下一步useTranslate composable