Vue 3 Gettext

全局属性

在 <template> 模板中可以使用翻译函数，当然在 scripts 代码中也可以。

翻译函数

$gettext

普通翻译函数

<template>
  {{ $gettext("My message") }}
</template>

const { $gettext } = useGettext();

$gettext("My message");

参数插值

<template>
  {{ $gettext("My message for %{ name }", { name: "Rudi" }) }}
</template>

$pgettext

上下文翻译，第一个参数是上下文，第二个参数是待翻译内容。

<template>
  {{ $pgettext("my_context", "My message") }}
</template>

const { $pgettext } = useGettext();

$pgettext("my_context", "My message");

参数插值

<template>
  {{ $pgettext("my_context", "My message for %{ name }", { name: "Rudi" }) }}
</template>

$ngettext

用于支持复数翻译。

<template>
  {{ $ngettext("apple", "apples", 5) }}
</template>

const { $ngettext } = useGettext();

$ngettext("apple", "apples", 5);

参数插值

<template>
  {{ $ngettext("apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }}
</template>

$npgettext

带上下文的复数翻译。

<template>
  {{ $npgettext("my_context", "apple", "apples", 5) }}
</template>

const { $npgettext } = useGettext();

$npgettext("my_context", "apple", "apples", 5);

参数插值

<template>
  {{ $npgettext("my_context", "apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }}
</template>

$language

这个属性是插件实例，可以通过这个属性访问插件实例的属性/方法。比如可以拿到当前语言：

<template>
  {{ $language.current }}
</template>

const gettext = useGettext();

console.log(gettext.current);

$gettextInterpolate

这个帮助函数已经不需要使用了，因为上面的翻译函数已经支持了参数插值。

这是一个用于支持参数插值(格式化参数)的帮助函数。

<template>
  {{ $gettextInterpolate($pgettext("My message for %{ name }"), { name: "Rudi" }) }}
</template>

const { interpolate } = useGettext();

interpolate($gettext("My message for %{ name }"), { name: "Rudi" });

自定义翻译函数名称

你可以在 createGettext 时通过 globalProperties 选项自定义翻译函数的名称，参见 插件配置。

例如，要使用 WordPress 的翻译名称风格，可以作如下配置：

import { createGettext } from "vue3-gettext";

const gettext = createGettext({
  ...
  globalProperties: {
    gettext: ['$gettext', '__'],  // 这样支持同时使用 $gettext, __ 两种方式
    ngettext: ['$ngettext', '_n'],
    pgettext: ['$pgettext', '_x'],
    npgettext: ['$npgettext', '_nx'],
  }
})

如果 VSCode 警告 Property '{0}' does not exist on type '{1}'. ts(2339)(类型“xxx”上不存在“__”属性), 请考虑新建一个 gettext.d.ts 文件，内容如下：

export { };
declare module 'vue' {
    interface ComponentCustomProperties {
        __: (msgid: string, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
        _x: (context: string, msgid: string, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
        _n: (msgid: string, plural: string, n: number, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
        _xn: (context: string, msgid: string, plural: string, n: number, parameters?: {
            [key: string]: string;
        }, disableHtmlEscaping?: boolean) => string;
    }
}

Html 转义

默认地，所有的翻译函数都会进行 html 转义，不过也可以通过最后一个参数 disableHtmlEscaping 来控制是否转义。 如果确实需要包含 html 标签，你需要指定该参数为 true 以避免转义，并且将结果通过 v-htmlopen in new window 来显示:

<template>
  <span v-html="$gettext('My %{name}', { name: '<b>Rudi</b>' }, true)"></span>
</template>

请谨慎使用 v-htmlopen in new window。不要将用户输入的内容用于 v-html，否则可能引起 XSS 攻击。