桌面组件

Appearance

国际化 ​

widgetjs 提供 useAppLanguage 组合式 API，帮助组件接收应用语言的初始值与变更通知，从而实现国际化（i18n）支持。

下面先给出与 Vue I18n 的集成示例，以及常见注意事项。

快速示例 ​

typescript
import { useAppLanguage } from '@widget-js/vue3'

export default {
  setup() {
    // 注册语言回调：onLoad — 应用启动或首次读取语言时触发；onChange — 语言切换时触发
    useAppLanguage({
      onLoad: (lang) => {
        // 在组件初始化时读取到的语言，lang 的取值为 'zh' 或 'en'
        console.log('loaded language:', lang)
      },
      onChange: (lang) => {
        // 语言变更回调
        console.log('language changed to:', lang)
      },
    })
  },
}

与 Vue I18n 集成（推荐） ​

推荐使用 Vue I18n 来管理应用的翻译文本。下面示例演示在 setup() 中把应用语言同步到 Vue I18n 的 locale：

typescript
import { useI18n } from 'vue-i18n'
import { useAppLanguage } from '@widget-js/vue3'

export default {
  setup() {
    const { locale } = useI18n()

    useAppLanguage({
      onLoad: (lang) => {
        // 设置初始语言
        locale.value = lang
      },
      onChange: (lang) => {
        // 语言变更时更新 i18n
        locale.value = lang
      },
    })
  },
}

如果你的项目使用的是全局 i18n 实例（如 i18n.global.locale），也可以直接操作该实例。

WARNING

应用语言当前仅支持 中文 (zh) 和 英文 (en) 切换；如果需要更多语言支持，请在应用层扩展并同步到 widget 环境。

应用设置-语言

推荐资源 ​