国际化
Lucky UI 内置轻量级国际化能力,不强制依赖 vue-i18n。组件运行态文案会从 Locale 读取,适用于 H5、小程序和 App。
支持语言
当前内置 8 个语言包:
| 语言码 | 语言 |
|---|---|
zh-Hans | 简体中文 |
zh-Hant | 繁體中文 |
en | English |
ja | 日本語 |
ko | 한국어 |
fr | Français |
es | Español |
pt-BR | Português |
组件库启动时会尝试读取 uni.getLocale(),匹配到内置语言时自动切换;未匹配时使用 zh-Hans。
切换语言
ts
import { Locale } from '@/uni_modules/lucky-ui/locale'
Locale.use('en')
Locale.use('zh-Hant')Locale.use 只影响 Lucky UI 组件内部文案,不会接管业务应用自身的语言系统。
语言选择列表
如果需要渲染语言选择器,可直接使用内置语言元信息:
vue
<script setup lang="ts">
import { ref } from 'vue'
import { Locale, SUPPORTED_LOCALES, type LocaleCode } from '@/uni_modules/lucky-ui/locale'
const current = ref(Locale.locale)
function changeLocale(lang: LocaleCode) {
Locale.use(lang)
current.value = lang
}
</script>
<template>
<view>
<button
v-for="item in SUPPORTED_LOCALES"
:key="item.value"
@tap="changeLocale(item.value)"
>
{{ item.label }}
</button>
</view>
</template>扩展语言包
业务侧可以新增完整语言包:
ts
import { Locale } from '@/uni_modules/lucky-ui/locale'
Locale.add({
de: {
name: 'de',
lk: {
common: {
confirm: 'Bestätigen',
cancel: 'Abbrechen',
loading: 'Wird geladen...',
empty: 'Keine Daten',
retry: 'Erneut versuchen',
clear: 'Leeren',
done: 'Fertig',
},
},
},
})
Locale.use('de')也可以覆盖现有语言的局部文案:
ts
Locale.add({
en: {
lk: {
common: {
confirm: 'OK',
},
upload: {
upload: 'Choose file',
},
},
},
})Locale.add 会合并到已有语言包;未覆盖的 key 会继续使用原有文案。
使用翻译函数
业务中如需复用组件库文案,可调用 Locale.t:
ts
import { Locale } from '@/uni_modules/lucky-ui/locale'
const text = Locale.t('lk.common.confirm')组件开发中建议使用 useLocale 绑定组件命名空间:
ts
import { useLocale } from '@/uni_modules/lucky-ui/composables/useLocale'
const { t } = useLocale('upload')
const uploadText = t('upload')useLocale('upload') 会优先读取 lk.upload.upload,不存在时回退到 lk.common.upload,最终回退到原始 key。
覆盖范围
已接入 i18n 的组件运行态文案包括:
- 时间选择
- Picker、Modal、Action Sheet、Popup 内置按钮文案
- Upload、Image、Textarea、Empty、Countdown
- Tabbar Container 加载与重试文案
- Pull Refresh、Keyboard、Verify Code
- Preload Debugger、Transition 预设、主题色名称
- Form 默认校验失败文案
车牌键盘的省份简称保持原文展示,不做翻译。
预览验证
组件预览页顶部提供语言切换入口,可直接观察内置组件文案是否同步切换。
独立预览入口:
text
pages_sub/i18n-preview/index