ال `useTranslate` composable

لا يناسب كل شيء أحد المكونات. تأخذ السمات مثل placeholder أو title سلسلة، وفي بعض الأحيان تحتاج إلى ترجمة في البرنامج النصي الخاص بك. بالنسبة لهذه الأساليب، استخدم useTranslate composable أو أسلوب translate.

ال `useTranslate` composable

تقوم useTranslate بإرجاع دالة، تسمى عادةً t، تقوم بترجمة سلسلة:

<script setup lang="ts">
import { useTranslate } from '@magic-translate/vue';

const t = useTranslate();
</script>

<template>
  <input :placeholder="t('Search products')" />
</template>

تقوم t بإرجاع النص الأصلي أثناء تحميل الترجمة. بمجرد أن يصبح جاهزًا، تتم إعادة عرض المكون. مثل المكون <T>، فإنه يقبل خيارات اللغة والشكليات:

<input :placeholder="t('Your name', { lang: 'fr', formality: 'formal' })" />

كما أنها تقبل id لتحرير هذا الاستخدام للنص من تلقاء نفسها:

<button :title="t('Save', { id: 'checkout-save' })" />

المتغيرات

قم بتمرير القيم التي لا يجب ترجمتها في v، وقم بالإشارة إليها كـ $name، كما هو الحال مع مكون <T>:

<input :placeholder="t('Search $count products', { v: { count } })" />

تتم ترجمة النص مرة واحدة باسم Search {0} products، ويتم إعادة استخدام الترجمة المخزنة مؤقتًا عند تغيير count.

useT هو نفس composable مثل useTranslate.

الترجمة في الكود

لترجمة سلسلة في البرنامج النصي الخاص بك، اتصل بـ translate. إنها تعيد الوعد.

import { useMagicTranslate } from '@magic-translate/vue';

const magicTranslate = useMagicTranslate();
const message = await magicTranslate.translate('Your order has been placed');

// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

بدون خيار lang، تتم ترجمة النص إلى اللغة الحالية.

translate يأخذ المتغيرات أيضًا:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});

تستخدم المكونات الخارجية، على سبيل المثال في المتجر، الكائن الذي تم إرجاعه بواسطة createMagicTranslate مباشرةً. يوفر نفس أساليب translate و setLanguage وخاصية language.

ال useTranslate composable