国际化(i18n)

FormKit附带了对所有接口和验证消息的国际化支持。

可用语言

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

  • 🇱🇾 阿拉伯语 (ar) — 🙏 @Ahmedelforjani
  • 🇦🇿 阿塞拜疆语 (az) — 🙏 @EmrullahKutlar
  • 🇧🇬 保加利亚语 (bg) — 🙏 @ivanov1234159
  • Catalan flag (Senyera) 加泰罗尼亚语 (ca) — 🙏 @petergithubmgw
  • 🇨🇳 中文 (zh) — 🙏 @myleslee
  • 🇨🇳 繁体中文 (zh-TW) — 🙏 @actocoa
  • 🇭🇷 克罗地亚语 (hr) — 🙏 @antemarkic
  • 🇨🇿 捷克语 (cs) — 🙏 @dfridrich
  • 🇩🇰 丹麦语 (da) — 🙏 @bjerggaard
  • 🇳🇱 荷兰语 (nl) — 🙏 @arjendejong12
  • 🇺🇸 英语 (en)
  • 🇫🇮 芬兰语 - (fi) — 🙏 @mihqusta
  • 🇫🇷 法语 (fr) — 🙏 @HoreKk, @pop123123123
  • Frisian flag 弗里斯兰语 (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: '🚀 Launch',
        },
      },
    },
  })
)
消息键

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

添加您的语言

编写您所知道的语言的地区设置是为FormKit做出贡献的好方法,也是开始开源的简单方式!我们总是热切期待新的地区设置的拉取请求。为了支持这项工作,我们创建了一个地区设置构建器——一个小型的网络应用程序,使翻译过程尽可能简单。

帮助其他说您语言的人!贡献一个地区设置

当然,您不必使用我们的地区设置构建器来提交语言,我们非常欢迎您提交包含您的地区设置的标准拉取请求。

本地化

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