Dokumentacja

Komponent <T>

Owiń zawartość w komponencie <T>, aby ją przetłumaczyć. Oryginalna zawartość jest wyświetlana do momentu załadowania tłumaczenia.

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

Tekst z wiązaniami również działa. Treść jest ponownie tłumaczona za każdym razem, gdy się zmienia, na przykład gdy zmienia się name:

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

W przypadku wartości, które często się zmieniają, takich jak nazwy i liczby, zamiast tego użyj zmiennych, więc tekst jest tłumaczony tylko raz.

Wszystkie tłumaczenia żądane w tym samym czasie są wysyłane do interfejsu API w jednym żądaniu, a tłumaczenia są buforowane. Możesz używać dowolnej liczby komponentów <T>.

Wtyczka rejestruje <T> globalnie. Możesz go również zaimportować: import { T } from '@magic-translate/vue'. Translate jest tym samym składnikiem co T.

Props

PropTypOpis
formality'informal' | 'formal'Ustawia formalność tłumaczenia.
idstringUmożli wia samodzielną edycję tego użycia tekstu.
langLanguageZastępuje ustawiony język za pomocą createMagicTranslate.
vRecord<string, unknown>Wartości, które nie są przetłumaczone, odnoszone jako $name w treści. Zobacz Zmienne.
<T lang="fr" formality="formal">How are you?</T>

Zmienne

Przekaż zmieniające się wartości, takie jak nazwa lub liczba, w v i odniesienie do nich jako $name w treści:

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

Magic Translate tłumaczy tekst wokół wartości raz, jako Hi {0}, you have {1} new messages, i ponownie umieszcza wartości w aplikacji. Tłumaczenie jest przechowywane w pamięci podręcznej i działa dla każdego imienia i każdej liczby, a same wartości nigdy nie są wysyłane do Magic Translate. Gdy zmieniają się tylko wartości, żadne nowe żądanie nie jest składane.

Wartości są ponumerowane w kolejności, w jakiej pojawiają się po raz pierwszy. Tłumaczenie może przenosić je wszędzie tam, gdzie ich potrzebuje język, na przykład {1} neue Nachrichten für {0}. Tekst wokół wartości może zawierać HTML:

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

Kilka zasad:

  • Zastępowane są tylko klawisze v, więc tekst taki jak $5 pozostaje taki, jaki jest. Jeśli dwa klawisze zaczynają się w ten sam sposób, takie jak count i counts, wygrywa najdłuższy.
  • Ta sama nazwa może pojawić się więcej niż raz.
  • Wartości są wstawiane jako tekst, nigdy jako HTML. Zamiast tego umieść znaczniki w tekście wokół nich: Hi <b>$name</b>.
  • Zmienne są zastępowane tylko w tekście, a nie w atrybutach takich jak href lub title.
  • Klucz, który nie pojawia się w tekście, rejestruje ostrzeżenie, które przechwytuje literówki.
  • W przypadku renderowania po stronie serwera, na przykład z Nuxt, <T> z v renderuje się puste na serwerze i pojawia się po uruchomieniu aplikacji w przeglądarce.

Ograniczenia

  1. Nie można umieścić komponentów Vue wewnątrz komponentu <T>. Zwykłe elementy HTML są w porządku (patrz przykład poniżej), a style zakresowane nadal nad nimi pracują.
  2. Zawartość w składniku <T> nie może przekraczać 10 KB, czyli około 5000 znaków.
<!-- 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>

Aby przetłumaczyć atrybuty i inne ciągi, użyj useTranslate composable.

PoprzednieVueKolejnyuseTranslate composable