Skip to content

国际化

Lucky UI 内置轻量级国际化能力,不强制依赖 vue-i18n。组件运行态文案会从 Locale 读取,适用于 H5、小程序和 App。

支持语言

当前内置 8 个语言包:

语言码语言
zh-Hans简体中文
zh-Hant繁體中文
enEnglish
ja日本語
ko한국어
frFrançais
esEspañol
pt-BRPortuguê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

基于 MIT 协议开源 · 粤ICP备2022114240号-3