国际化(i18n)

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

可用语言

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

  • 🇱🇾 阿拉伯语 (ar) — 🙏 @Ahmedelforjani
  • 🇦🇿 阿塞拜疆语 (az) — 🙏 @EmrullahKutlar
  • 🇧🇬 保加利亚语 (bg) — 🙏 @ivanov1234159
  • 🇧🇦 波斯尼亚语 (bs) — 🙏 @TarikTz
  • 加泰罗尼亚旗帜(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
  • 🇱🇹 立陶宛语 (lt) - 🙏 @balu-lt
  • 🇲🇳 蒙古语 (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')

更改活动地区设置

有三种方法可以更改您的活动地区设置:

  • 使用 changeLocale 全局更改地区设置。
  • 使用 Vue 插件中的 this.$formkit.setLocale()(最适合选项 API)。
  • 很少使用,但直接修改根 config 对象时很有用。

使用 changeLocale

您可以使用 changeLocale 可组合函数更改所有 FormKit 输入的地区设置。当需要全局更改时,这是首选方法:

加载实时示例

使用 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 做出贡献的绝佳方式,也是开始参与开源项目的简单途径!我们总是热切期待新地区设置的拉取请求。为了支持这一努力,我们创建了一个地区设置构建器 —— 一个小型的网络应用程序,旨在使翻译过程尽可能简单。

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

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

本地化

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