Vuetify 中文网

简体中文

English

简体中文

English

主题

国际化 (i18n) ​

Vuetify 支持其组件的语言国际化（i18n）。

在引导应用程序时，可以使用defaultLocale选项指定可用的语言环境和默认的语言环境。设置服务还支持与vue-i18n的轻松集成。 使用具有 RTL(从右到左)语言的区域设置还会影响 Vuetify 组件的方向性。

快速入门 ​

要设置可用的区域设置消息或默认区域设置，请在安装 Vuetify 时提供locale(区域)设置选项。

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";

// Translations provided by Vuetify
import { pl, zhHans } from "vuetify/locale";

// Your own translation file
import sv from "./i18n/vuetify/sv";

const app = createApp();

const vuetify = createVuetify({
  locale: {
    locale: "zhHans",
    fallback: "sv",
    messages: { zhHans, pl, sv },
  },
});

app.use(vuetify);

app.mount("#app");

您可以使用useLocale可组合项在运行期间更改区域设置。

html
<script setup>
  import { useLocale } from "vuetify";

  const { current } = useLocale();

  function changeLocale(locale) {
    current.value = locale;
  }
</script>

如果你还在使用 Options API，你可以在this.$vuetify.locale上访问区域设置。

html
<script>
  export default {
    methods: {
      changeLocale(locale) {
        this.$vuetify.locale.current = locale;
      },
    },
  };
</script>

API ​

产品特点描述
useLocale使用可组合的区域设置
v-locale-provider本地化供应者组件用于将应用的一部分设置为另一种语言

为一定范围设置语言 ​

使用v-locale-provider组件，可以将应用程序的一部分作用域设置为与默认语言环境不同的语言环境。

html
<template>
  <v-app>
    <v-select></v-select>
    <!-- Will use default locale -->

    <v-locale-provider locale="ja">
      <v-select></v-select>
      <!-- Will use ja locale -->
    </v-locale-provider>
  </v-app>
</template>

RTL ​

RTL(从右到左)支持内置在 Vuetify 附带的所有本地化中。如果支持的语言supported language被标记为 RTL，则所有内容方向都会自动切换。有关如何向自定义区域设置添加 RTL 支持的信息，请参阅下一节next section。

下面的例子演示了如何使用v-locale-provider组件，在不切换当前语言的情况下，为内容的特定部分强制使用 RTL:

html
<v-app>
  <v-card>...</v-card> <!-- default locale used here -->

  <v-locale-provider rtl>
    <v-card>...<v-card> <!-- default locale used here, but with RTL active -->
  </v-locale-provider>
</v-app>

创建自定义本地化语言 ​

要创建自己的语言环境消息，复制并粘贴vuetify/src/locale/en的内容。Ts 到一个新文件，并更改本地化字符串。您还可以通过使用区域设置选项的rtl属性来指定它们是否应该以 RTL 方式显示。

js
export default {
  badge: '...',
  close: '...',
  ...
}
js
import { createVuetify } from "vuetify";
import customLocale from "./locales/customLocale";

const vuetify = createVuetify({
  locale: {
    locale: "customLocale",
    messages: { customLocale },
    rtl: {
      customLocale: true,
    },
  },
});

自定义 Vuetify 组件 ​

如果您正在构建需要挂接到语言环境服务的自定义 Vuetify 组件，则可以使用useLocale可组合函数中的t函数或在使用 Options API 时使用$vuetify.locale属性。

html
<template>
  <div class="my-component">{{ text }}</div>
</template>

<script setup>
  import { useLocale } from "vuetify";

  const { t } = useLocale();
  const text = t("$vuetify.my-component.text");
</script>

WARNING

Vuetify 语言环境服务只提供基本的翻译功能t，实际上应该只用于内部或自定义的 Vuetify 组件。建议您使用合适的 i18n 库，例如vue-i18n在您自己的应用程序中。Vuetify 确实提供了与其他库集成的支持。

vue-i18n ​

如果您正在使用 vue-i18n 库，则可以非常容易地将其与 Vuetify 集成。这允许您将所有翻译保存在一个地方。只需在消息中为$vuetify 创建一个条目，并添加相应的语言更改。然后使用提供的适配器函数将 vue-i18n 连接到 Vuetify(如下面的示例所示)。

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";
import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n";
import { createI18n, useI18n } from "vue-i18n";
import { en, sv } from "vuetify/locale";

const messages = {
  en: {
    $vuetify: {
      ...en,
      dataIterator: {
        rowsPerPageText: "Items per page:",
        pageText: "{0}-{1} of {2}",
      },
    },
  },
  sv: {
    $vuetify: {
      ...sv,
      dataIterator: {
        rowsPerPageText: "Element per sida:",
        pageText: "{0}-{1} av {2}",
      },
    },
  },
};

const i18n = createI18n({
  legacy: false, // Vuetify does not support the legacy mode of vue-i18n
  locale: "sv",
  fallbackLocale: "en",
  messages,
});

const vuetify = createVuetify({
  locale: {
    adapter: createVueI18nAdapter({ i18n, useI18n }),
  },
});

const app = createApp();

app.use(i18n);
app.use(vuetify);

app.mount("#app");

已支持语言 ​

目前，Vuetify 提供以下语言的翻译：

  • af - Afrikaans (Afrikaans)
  • ar - Arabic (العربية)阿拉伯语
  • az - Azerbaijani (Azərbaycan)阿塞拜疆语
  • bg - Bulgarian (български)保加利亚语
  • ca - Catalan (català)加泰罗尼亚语
  • ckb - Central Kurdish (کوردی)中库尔德语
  • cs - Czech (čeština)捷克语
  • da - Danish (Dansk)丹麦语
  • de - German (Deutsch)德语
  • el - Greek (Ελληνικά)希腊语
  • en - English 英语
  • es - Spanish (Español)西班牙语
  • et - Estonian (eesti)爱沙尼亚语
  • fa - Persian (فارسی)波斯语
  • fi - Finnish (suomi)芬兰语
  • fr - French (Français)法语
  • he - Hebrew (עברית)希伯来语
  • hr - Croatian (hrvatski jezik)克罗地亚语
  • hu - Hungarian (magyar)匈牙利语
  • id - Indonesian (Indonesian)印度尼西亚语
  • it - Italian (Italiano) 意大利语
  • ja - Japanese (日本語)日语
  • km - Khmer (ខ្មែរ)
  • ko - Korean (한국어)韩语
  • lt - Lithuanian (lietuvių kalba)立陶宛语
  • lv - Latvian (latviešu valoda)拉脱维亚语
  • nl - Dutch (Nederlands)荷兰语
  • no - Norwegian (Norsk)挪威语
  • pl - Polish (język polski)波兰语
  • pt - Portuguese (Português)葡萄牙语
  • ro - Romanian (Română)罗马尼亚语
  • ru - Russian (Русский)俄语
  • sk - Slovak (slovenčina)斯洛伐克语
  • sl - Slovene (slovenski jezik)斯洛文尼亚语
  • srCyrl - Serbian (српски језик)塞尔维亚语
  • srLatn - Serbian (srpski jezik)塞尔维亚语
  • sv - Swedish (svenska)瑞典语
  • th - Thai (ไทย)泰国语
  • tr - Turkish (Türkçe)土耳其语
  • uk - Ukrainian (Українська)乌克兰语
  • vi - Vietnamese (Tiếng Việt)越南语
  • zhHans - Chinese (中文)简体中文
  • zhHant - Chinese (正體中文)繁体中文