多语言国际化 i18n

Pixelium Design 组件库提供了完整的国际化支持，默认包含简体中文 (zh-cn) 和英文 (en, 默认) 两种语言包。通过 locale 模块，您可以轻松管理应用的多语言功能。

在组件中的多语言在 locale 更新后，会立刻触发响应式更新，例如作为组件使用 Dialog，通过组件静态方法调用的多语言则会在下次调用生效，例如通过 Dialog 上的静态方法唤起对话框，其中默认的标题部分。

// Full import
import { locale } from '@pixelium/web-vue'

// If on-demand import
import { locale } from '@pixelium/web-vue/es'

设置语言 locale.setLocale

设置当前应用的语言环境。

import { locale } from '@pixelium/web-vue'

// Switch to English
locale.setLocale('en')

// Switch to simplified Chinese
locale.setLocale('zh-cn')

查看翻译信息 locale.getMessages

返回指定语言的翻译信息，数据结构是一个值为字符串的嵌套字典对象。

import { locale } from '@pixelium/web-vue'

locale.getMessages('en')

添加语言 / 修改翻译 locale.addMessages

添加或覆盖指定语言的翻译消息。

import { locale } from '@pixelium/web-vue'

// Modify English translations
locale.addMessages('en', {
  dialog: {
    cancel: 'Cancel Operation'
  }
})

// Add French translations as a new language
locale.addMessages('fr', {
  dialog: {
    confirm: 'Soumettre',
    cancel: 'Annuler'
  }
})

辅助方法

locale.getCurrentLang

获取当前设置的语言代码。

import { locale } from '@pixelium/web-vue'

const currentLang = locale.getCurrentLang()
console.log(currentLang) // 'zh-cn' or 'en'

locale.emitter

基于发布订阅模式的监听器，监听语言变化事件。

详细 API 请查阅 mitt。

import { locale } from '@pixelium/web-vue'

// Listen for language switch events
locale.emitter.on('lang-change', (lang) => {
  console.log(`Language changed to: ${lang}`)
  // Update application state here
})