国际化 (i18n)

FormKit支持其所有界面和验证消息的国际化支持。

可用语言

目前,FormKit支持以下语言(在@formkit/i18n包中):

  • 🇱🇾 阿拉伯语 (ar) — 🙏 @Ahmedelforjani
  • 🇦🇿 阿塞拜疆语 (az) — 🙏 @EmrullahKutlar
  • 🇧🇬 保加利亚语 (bg) — 🙏 @ivanov1234159
  • 加泰罗尼亚国旗(Senyera) 加泰罗尼亚语 (ca) — 🙏 @petergithubmgw
  • 🇨🇳 中文 (zh) — 🙏 @myleslee
  • 🇨🇳 繁体中文 (zh-TW) — 🙏 @actocoa
  • 🇭🇷 克罗地亚语 (hr) — 🙏 @antemarkic
  • 🇨🇿 捷克语 (cs) — 🙏 @dfridrich
  • 🇩🇰 丹麦语 (da) — 🙏 @bjerggaard
  • 🇳🇱 荷兰语 (nl) — 🙏 @arjendejong12
  • 🇺🇸 英语 (en)
  • 🇫🇮 芬兰语 (fi) — 🙏 @mihqusta
  • 🇫🇷 法语 (fr) — 🙏 @HoreKk, @pop123123123
  • 弗里斯兰国旗 弗里斯兰语 (fy) — 🙏 @arjendejong12
  • 🇩🇪 德语 (de) — 🙏 @digitalkaoz, @tosling
  • 🇬🇷 希腊语 (el) — 🙏 @mendrinos
  • 🇮🇱 希伯来语 (he) - 🙏 @Hepi420
  • 🇭🇺 匈牙利语 (hu) — 🙏 @KristofKekesi
  • 🇮🇸 冰岛语 (is) - 🙏 @Gunsobal
  • 🇮🇩 印度尼西亚语 (id) - 🙏 @rama-adi
  • 🇮🇹 意大利语 (it) - 🙏 @punga78, @Archetipo95
  • 🇯🇵 日语 (ja) - 🙏 @wonyx
  • 🇰🇿 哈萨克语 (kk) - 🙏 @ilya-raevskiy
  • 🇰🇷 韩语 (ko) - 🙏 @bwp618, @titusdecali
  • 🇱🇻 拉脱维亚语 (lv) - 🙏 @Bamslation
  • 🇲🇳 蒙古语 (mn) - 🙏 @zemunkh
  • 🇳🇴 挪威博克马尔语 (nb) - 🙏 @hognevevle
  • 🇮🇷 波斯语 (fa) - 🙏 @shahabbasian
  • 🇵🇱 波兰语 (pl) - 🙏 @xxSkyy
  • 🇧🇷 葡萄牙语 (pt) 🙏 @r-martins, @dbomfim
  • 🇷🇴 罗马尼亚语 (ro) - 🙏 @danve
  • 🇷🇺 俄语 (ru) - 🙏 @andreimakushkin
  • 🇸🇰 斯洛伐克语 (sk) - 🙏 @neridev
  • 🇸🇮 斯洛文尼亚语 (sl) - 🙏 @krisflajs
  • 🇷🇸 塞尔维亚语 (sr) - 🙏 @milos5593
  • 🇦🇷 西班牙语 (es) - 🙏 @inibg
  • 🇸🇪 瑞典语 (sv) - 🙏 @purung
  • 🇹🇯 塔吉克语 (tg) - 🙏 @devixrootix
  • 🇹🇱 泰顿语 (tet) - 🙏 @joshbrooks
  • 🇹🇭 泰语 (th) - 🙏 @pknn
  • 🇺🇦 乌克兰语 (uk) - 🙏 @aresofficial
  • 🇺🇿 乌兹别克语 (uz) - 🙏 @root5427
  • 🇹🇷 土耳其语 (tr) - 🙏 @ragokan, @cemkaan
  • 🇻🇳 越南语 (vi) - 🙏 @oanhnn

尽管旗帜是语言的不准确代表(旗帜表示地理国家,而语言可以在世界的许多地区使用),但我们在上面的列表中使用旗帜来表示创建特定区域设置的贡献者的位置。

帮助其他使用您语言的人!贡献区域设置

使用区域设置

FormKit的defaultConfig默认包含英语区域设置 - 要添加其他区域设置,请从@formkit/i18n导入它,并在初始化FormKit插件时将其附加到locales选项。要设置活动区域设置,请使用locale选项指定它:

import { createApp } from 'vue'
import App from 'App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { de, fr, zh } from '@formkit/i18n'

const app = createApp(App)
app.use(
  plugin,
  defaultConfig({
    // 定义其他区域设置
    locales: { de, fr, zh },
    // 定义活动区域设置
    locale: 'fr',
  })
)
app.mount('#app')

更改活动区域设置

有两种方法可以更改活动区域设置:

  • 使用Vue插件中的this.$formkit.setLocale()(适用于选项API)。
  • 直接修改根config对象(适用于组合API)。

使用setLocale

在使用Vue的选项API时,您可以访问this.$formkit,其中包含setLocale('de') - 一个专门用于全局更改当前区域设置的方法:

加载实时示例

使用根config

在使用组合API时,您将无法访问this.$formkit。相反,您可以获取并修改根FormKit配置对象。这通过Vue的inject机制和唯一的Symbol全局提供:

加载实时示例

覆盖

如果您发现区域设置中的某个短语不符合您的要求,您可以在配置中全局覆盖这些单独的消息。您可以通过为defaultConfig提供一个messages对象来实现这一点:

import { createApp } from 'vue'
import { plugin, defaultConfig } from '@formkit/vue'
import App from 'App.vue'

const app = createApp(App)
app.use(
  plugin,
  defaultConfig({
    messages: {
      en: {
        ui: {
          submit: '🚀 发射',
        },
      },
    },
  })
)
消息键

消息通常在区域设置的uivalidation属性下找到。要查看键和消息的完整列表,请查看英语区域设置。

添加您的语言

为您了解的语言编写本地化是为FormKit做出贡献的绝佳方式,也是开始参与开源的简单方式!我们非常期待收到关于新语言的拉取请求。为了支持这一努力,我们创建了一个本地化构建器 - 一个小型的Web应用程序,使翻译过程尽可能简单。

帮助其他使用您的语言的人!贡献本地化

当然,您不必使用我们的本地化构建器来提交语言,欢迎您通过标准的拉取请求提交包含您的本地化的语言。

本地化

如果您的语言已经在列表中(比如英语),但您的地区使用该语言的变体(如🇬🇧 en-GB),请随时提交您的本地化语言。