国际化
Vexip UI 的默认语言为简体中文，并提供其他语言包，你可以通过 全局配置 或 ConfigProvider 快速切换。
切换语言#
在使用 app.use 安装组件库，则可以通过第二个参数的 locale 选项修改语言：
ts
import { enUSLocale, install } from 'vexip-ui'
app.use(install, {
locale: enUSLocale()
})
使用 app.use 会引入所有组件，如果你需要按需引入，可以在顶层包裹一个 ConfigProvider 组件进行配置：
vue
<template>
<ConfigProvider :locale="taINLocale()">
<App></App>
</ConfigProvider>
</template>
<script setup lang="ts">
import { taINLocale } from 'vexip-ui'
</script>
如果你需要支持动态切换语言，可以在配置时传入一个响应式数据：
ts
import { ref } from 'vue'
import { enUSLocale, install, taINLocale } from 'vexip-ui'
const vexipuiLocale = ref(enUSLocale())
app.use(install, {
locale: vexipuiLocale
})
// 切换
vexipuiLocale.value = taINLocale()
你也可以通过 registerLocale 方法注册并缓存一个语言包，随后通过修改 locale.locale 属性快速切换。
ts
import { ref } from 'vue'
import { enUSLocale, install, registerLocale, taINLocale } from 'vexip-ui'
registerLocale(enUSLocale())
registerLocale(taINLocale())
const vexipuiLocale = ref({ locale: 'en-US' })
app.use(install, {
locale: vexipuiLocale
})
// 切换
vexipuiLocale.value = 'ta-IN'
支持的语言#
| 语言 | 名称 | 配置 | 始于 |
|---|---|---|---|
ar-EG | 阿拉伯语 | arEGLocale | 2.2.24 |
de-DE | 德语 | deDELocale | 2.2.9 |
en-US | 英语 | enUSLocale | - |
fa-IR | 波斯语 | faIRLocale | 2.3.14 |
fr-FR | 法语 | frFRLocale | 2.3.3 |
ta-IN | 泰米尔语 | taINLocale | 2.1.11 |
zh-CN | 简体中文 | zhCNLocale | - |
zh-HK | 繁体中文（中国香港） | zhHKLocale | 2.2.2 |
zh-TW | 繁体中文（中国台湾） | zhTWLocale | 2.2.2 |
局部修改#
你可以通过只传入部分的选项，实现局部修改某个语言包的配置。
通过 app.use 传入选项修改：
ts
import { enUSLocale, install, registerLocale } from 'vexip-ui'
// 如果为中文则无需注册
registerLocale(enUSLocale())
app.use(install, {
locale: {
locale: 'en-US',
input: {
placeholder: 'Awesome'
}
}
})
通过 ConfigProvider 修改：
vue
<template>
<ConfigProvider :locale="locale">
<App></App>
</ConfigProvider>
</template>
<script setup lang="ts">
import type { LocaleOptions } from 'vexip-ui'
const locale: LocaleOptions = {
input: {
placeholder: 'Awesome'
}
}
</script>
增加语言#
如果在支持的语言中未有你想要的，可以创建一个语言包。
借助 defineLocaleConfig 帮助函数，你可以获得更好的类型提示和推导。
ts
import { defineLocaleConfig } from 'vexip-ui'
function enUSLocale() {
return defineLocaleConfig({
locale: 'en-US',
wordSpace: true,
// config
})
}
完整的国际化选项可以浏览 此处。
如果你愿意发起一个 PR，可以跟随下面的步骤：