国际化 (i18n)

国际化 (i18n)

Vuetify 支持其组件的语言国际化 (i18n)。在引导应用程序时，您可以使用 current 选项指定可用的语言环境和当前活动的语言环境。lang 服务还支持与 vue-i18n 的轻松集成。

快速入门

要设置可用的语言环境或当前语言环境，请在安装 Vuetify 时提供 lang 选项。locales 属性将与现有的语言环境合并。你可以在运行时通过 Vue 实例上的 $vuetify 对象更改语言环境。

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

af - Afrikaans (Afrikaans)
ar - Arabic (اللغة العربية)
ca - Catalan (català)
cs - Czech (čeština)
de - German (Deutsch)
el - Greek (Ελληνικά)
en - English
es - Spanish (Español)
et - Estonian (eesti)
fa - Persian (فارسی)
fr - French (Français)
he - Hebrew (עברית)
hr - Croatian (hrvatski jezik)
hu - Hungarian (magyar)
id - Indonesian (Indonesian)
it - Italian (Italiano)
ja - Japanese (日本語)
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 (Русский)
sl - Slovene (slovenski jezik)
srCyrl - Serbian (српски језик)
sv - Swedish (svenska)
th - Thai (ไทย)
tr - Turkish (Türkçe)
uk - Ukrainian (Українська)
zhHans - Chinese (中文)
zhHant - Chinese (中文)

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
// Translation provided by Vuetify (javascript)
import zhHans from 'vuetify/es5/locale/zh-Hans'
// Translation provided by Vuetify (typescript)
import pl from 'vuetify/src/locale/pl'
// Your own translation file
import sv from './i18n/vuetify/sv'
Vue.component('my-component', {
  methods: {
    changeLocale () {
      this.$vuetify.lang.current = 'sv'
    },
  },
})
export default new Vuetify({
  lang: {
    locales: { zhHans, pl, sv },
    current: 'zhHans',
  },
})

Vuetify 只提供了一个基本的翻译功能 t。对于更高级的国际化功能，建议将 Vuetifys 与 vue-i18n 的集成。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

创建翻译

要创建您自己的翻译，请使用下面的代码。你将继承 Vuetify 的翻译，但也可以添加你自己的翻译。另外，你也可以复制并粘贴 vuetify/src/locale/en.ts 的内容，但这需要在更新时手动同步文件。

import { en } from 'vuetify/src/locale'
export default {
  ...en,
  key1: "key 1 internationalization",
  key2: "key 2 internationalization",
  namespace: {
    key3: "key 3 internationalization"
  }
}

自定义组件

如果要构建需要国际化的自定义 Vuetify 组件，可以使用 t 函数，该函数是 $vuetify.lang API 的一部分。

<!-- Vue Component -->
<template>
  <div class="my-component">
    {{ $vuetify.lang.t('$vuetify.my-component.text') }}
  </div>
</template>

Vue i18n

如果您使用的是 vue-i18n 软件包，您可以非常容易地将其与 Vuetify 集成。这让你可以将所有的翻译都保存在一个地方。只需在你的消息中为 $vuetify 创建一个条目，然后添加相应的语言更改。然后通过提供一个自定义翻译功能将 vue-i18n 与 Vuetify 挂钩（如下图所示）。欲知所有可用按键的完整列表，请导航这里。

一个重要注意事项是，在使用外部本地化插件时，如果当前语言环境不存在本地化，vuetify 不会自动默认使用英语。因此，请确保为插件提供尽可能完整的本地化。

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import VueI18n from 'vue-i18n'
Vue.use(Vuetify)
Vue.use(VueI18n)
const messages = {
  en: {
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Items per page:',
        pageText: '{0}-{1} of {2}',
      },
    },
  },
  sv: {
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Element per sida:',
        pageText: '{0}-{1} av {2}',
      },
    },
  },
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'sv', // set locale
  messages, // set locale messages
})
export default new Vuetify({
  lang: {
    t: (key, ...params) => i18n.t(key, params),
  },
})

Internationalization（国际化）

国际化 (i18n)

快速入门

API

创建翻译

自定义组件

Vue i18n