Skip to content

国际化 (i18n)

Directix 为指令消息、错误消息和帮助文本提供内置的国际化支持。

支持的语言

语言代码状态
中文zh-CN✅ 完整
英文en-US✅ 完整
日文ja-JP✅ 完整

基本用法

typescript
import { createI18n, setLocale, getLocale } from 'directix'
import { zhCN, enUS, jaJP } from 'directix'

// 初始化 i18n
const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
    'ja-JP': jaJP,
  },
})

// 运行时切换语言
setLocale('en-US')

// 获取当前语言
const currentLocale = getLocale() // 'en-US'

翻译键

所有指令消息遵循一致的键结构:

directives.{指令名称}.{消息类型}
errors.{错误键}
warnings.{警告键}
help.{帮助键}

示例键

描述
directives.debounce.description防抖指令描述
directives.debounce.params.wait"wait" 参数描述
directives.debounce.errors.invalid_wait"wait" 参数无效错误消息
errors.invalid_param通用参数无效错误
warnings.deprecated功能已弃用警告

与警告系统配合使用

警告系统自动使用 i18n 翻译:

typescript
import { directiveWarn, setWarningI18n } from 'directix'
import { t } from 'directix'

// 将 i18n 连接到警告系统
setWarningI18n(t)

// 现在警告使用翻译后的消息
directiveWarn('debounce', 'errors.invalid_wait', { wait: -100 })
// 输出: [Directix] v-debounce: wait 参数无效,必须为正数

添加自定义语言

您可以添加自己的语言翻译:

typescript
import { createI18n, type I18nMessages } from 'directix'

const customLang: I18nMessages = {
  directives: {
    debounce: {
      description: '您的自定义描述',
      params: { wait: '您的自定义参数描述' },
      errors: { invalid_wait: '您的自定义错误消息' },
    },
    // ... 其他指令
  },
  errors: {
    invalid_param: '您的自定义错误',
    // ... 其他错误
  },
  warnings: {
    deprecated: '您的自定义警告',
    // ... 其他警告
  },
  help: {
    installation: '您的自定义帮助',
  },
}

createI18n({
  locale: 'custom',
  messages: { custom: customLang },
})

消息插值

消息支持参数插值:

typescript
import { t } from 'directix'

// 插值参数
const message = t('errors.type_error', {
  param: 'wait',
  expected: 'number',
  actual: 'string',
})
// 结果: "参数 'wait' 类型错误:期望 number,实际 string"

最佳实践

  1. 尽早初始化 - 在使用指令前设置 i18n
  2. 使用 fallbackLocale - 始终提供回退语言
  3. 复用翻译 - 使用 t() 函数保持消息一致性
  4. 谨慎扩展 - 添加自定义翻译时,扩展现有翻译

时区与地区适配

Directix 提供时区和地区适配工具,用于处理区域特定的格式化需求。

获取时区信息

typescript
import { getTimezoneInfo } from 'directix'

const tz = getTimezoneInfo()
console.log(tz)
// {
//   id: 'Asia/Shanghai',
//   offset: 8,
//   offsetString: '+08:00',
//   isDST: false,
//   name: 'Shanghai'
// }

检测用户地区

typescript
import { detectLocaleInfo } from 'directix'

const info = detectLocaleInfo()
console.log(info)
// {
//   locale: 'zh-CN',
//   language: 'zh',
//   region: 'CN',
//   script: null,
//   browserLocale: 'zh-CN',
//   timezone: 'Asia/Shanghai'
// }

地区特定日期格式

typescript
import { getDateFormat, formatDateLocale } from 'directix'

// 获取地区特定的日期格式配置
const dateFormat = getDateFormat('CN')
// {
//   datePattern: 'YYYY-MM-DD',
//   timePattern: 'HH:mm:ss',
//   hourCycle: 'h23',
//   firstDayOfWeek: 1,
//   dateSeparator: '-',
//   timeSeparator: ':'
// }

// 按地区格式化日期
const formatted = formatDateLocale(new Date())
// 输出根据用户地区自动格式化的日期时间

地区特定数字格式

typescript
import { getNumberFormat, formatNumberLocale, formatCurrencyLocale } from 'directix'

// 获取地区特定的数字格式配置
const numberFormat = getNumberFormat('DE')
// {
//   decimalSeparator: ',',
//   thousandsSeparator: '.',
//   currencySymbol: '€',
//   currencyPosition: 'after',
//   currencyDecimals: 2
// }

// 格式化数字
formatNumberLocale(1234567.89) // '1,234,567.89' (美国) 或 '1.234.567,89' (德国)

// 格式化货币
formatCurrencyLocale(99.99) // '$99.99' (美国) 或 '99,99€' (德国)

支持的地区

Directix 内置以下地区的格式化配置:

地区代码日期格式货币符号
中国CNYYYY-MM-DD¥
美国USMM/DD/YYYY$
日本JPYYYY/MM/DD¥
德国DEDD.MM.YYYY
法国FRDD/MM/YYYY
英国GBDD/MM/YYYY£
韩国KRYYYY.MM.DD
印度INDD/MM/YYYY

获取支持地区列表

typescript
import { getSupportedRegions } from 'directix'

const regions = getSupportedRegions()
// ['CN', 'US', 'JP', 'DE', 'FR', 'GB', 'KR', 'IN']

显示语言名称

typescript
import { getLocaleDisplayName } from 'directix'

// 获取语言的本地化显示名称
getLocaleDisplayName('zh-CN', 'en') // 'Chinese (China)'
getLocaleDisplayName('en-US', 'zh') // '英语(美国)'

基于 MIT 许可发布