国际化 (i18n)

SXO 提供了一个轻量级的国际化系统，支持动态语言切换和带参数的消息翻译。

使用方法

全局配置

在应用顶层使用 I18nProvider：

<script setup>
import { I18nProvider } from '@sxo/vue';

const messages = {
  en: {
    welcome: 'Welcome, {0}!',
    submit: 'Submit',
    errors: {
      required: 'This field is required'
    }
  },
  zh: {
    welcome: '欢迎，{0}！',
    submit: '提交',
    errors: {
      required: '此字段为必填项'
    }
  }
};
</script>

<template>
  <I18nProvider locale="zh" :messages="messages">
    <App />
  </I18nProvider>
</template>

在组件中使用

使用 useI18n 钩子：

<script setup>
import { useI18n } from '@sxo/vue';

const { t, locale, setLocale } = useI18n();

const changeLang = () => {
  setLocale(locale === 'zh' ? 'en' : 'zh');
};
</script>

<template>
  <div>
    <p>{{ t('welcome', 'SXO') }}</p>
    <button @click="changeLang">切换语言 (当前: {{ locale }})</button>
  </div>
</template>

API

I18nProvider Props

属性	类型	默认值	说明
locale	string	'en'	初始语言
messages	I18nMessages	-	语言包数据

useI18n Return

属性	类型	说明
locale	string	当前语言标识
t	(key, ...args) => string	翻译函数，支持 {0}, {1} 占位符
setLocale	(locale: string) => void	切换当前语言