更新记录

0.0.2（2024-06-30）

• feat: 增加$t插值功能
• feat: 增加$tc复数功能
• feat: 增加tabbar规则

0.0.1（2024-06-25）

• init

平台兼容性

uni-app

uni-app x

lime-i18n

安装

在市场导入即可

基础使用

// main.uts
import { createI18n } from '@/uni_modules/lime-i18n'

//目录自己决定
import zhCN from './locales/zh-CN'
import enUS from './locales/en_US'

const i18n = createI18n({
  locale: 'zh-CN', // 默认显示语言
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
}) 

export function createApp(){
    const app = createSSRApp(App);
    app.use(i18n)
    //....
}

切换语言

模板中切换

<template>
    <view>
        <text>测试：{{ $t('headMenus.userName') }}</text>
        <button @click="$locale.value = $locale.value != 'zh-CN' ? 'zh-CN' : 'en-US'">切换{{$locale}}</button>
    </view>
</template>

选项式API中切换

  export default {
    data() {
      return {

      }
    },
    methods: {
        onClick() {
            this.$locale.value = this.$locale.value != 'zh-CN' ? 'zh-CN' : 'en-US'
        }
    }
  }

选项组合API中切换

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const onClick = () => {
    if(instance == null) return
    instance.proxy.$locale.value = instance.proxy.$locale.value != 'zh-CN' ? 'zh-CN' : 'en-US'
}

延迟加载

直接调用创建的

// 模拟请求后端接口返回
setTimeout(() => {
    // 直接调用创建的
    i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

选项组合API

// 模拟请求后端接口返回
setTimeout(() => {
    this.$i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

组合式API

// 模拟请求后端接口返回
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
setTimeout(() => {
    instance.proxy.$i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

格式化

具名插值

语言环境信息如下：

const messages = {
  en: {
    message: {
      hello: '{msg} world'
    }
  }
}

模板如下：

<text>{{ $t('message.hello', { msg: 'hello' }) }}</text>

输出如下：

<text>hello world</text>

列表插值

语言环境信息如下：

const messages = {
  en: {
    message: {
      hello: '{0} world'
    }
  }
}

模板如下：

<text>{{ $t('message.hello', ['hello']) }}</text>

输出如下：

<text>hello world</text>

链接插值

如果有一个翻译关键字总是与另一个具有相同的具体文本，你可以链接到它。要链接到另一个翻译关键字，你所要做的就是在其内容前加上一个@:符号后跟完整的翻译键名，包括你要链接到的命名空间。
语言环境信息如下：

const messages = {
  en: {
    message: {
      the_world: 'the world',
      dio: 'DIO:',
      linked: '@:message.dio @:message.the_world !!!!'
    }
  }
}

模板如下：

<text>{{ $t('message.linked') }}</text>

输出如下：

<text>DIO: the world !!!!</text>

内置修饰符

如果语言区分字符大小写，则可能需要控制链接的区域设置消息的大小写。链接邮件可以使用修饰符@.modifier：key 进行格式化

以下修饰符当前可用

• upper: 链接消息中的所有字符均大写
• lower: 小写链接消息中的所有字符
• capitalize: 大写链接消息中的第一个字符

语言环境信息如下：

const messages = {
  en: {
    message: {
      homeAddress: 'Home address',
      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
    }
  }
}

模板如下：

<text>{{ $t('message.homeAddress') }}</text>
<text class="error">{{ $t('message.missingHomeAddress') }}</text

输出如下：

<text>Home address</text>
<text class="error">Please provide home address</text>

自定义修饰符

如果要使用非内置修饰符，则可以使用自定义修饰符。

const i18n = createI18n({
  locale: 'en',
  messages: {
    // set something locale messages ...
  },
  // set custom modifiers at `modifiers` option
  modifiers: {
    snakeCase: (str:string):string => str.split(' ').join('_')
  }
})

区域设置消息如下：

const messages = {
  en: {
    message: {
      snake: 'snake case',
      custom_modifier: "custom modifiers example: @.snakeCase:{'message.snake'}"
    }
  }
}

复数

你可以使用复数进行翻译。你必须定义具有管道 | 分隔符的语言环境，并在管道分隔符中定义复数。

*您的模板将需要使用 $tc() 而不是 $t()
语言环境信息如下：

const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples'
  }
}

模板如下：

<text>{{ $tc('car', 1) }}</text>
<text>{{ $tc('car', 2) }}</text>

<text>{{ $tc('apple', 0) }}</text>
<text>{{ $tc('apple', 1) }}</text>
<text>{{ $tc('apple', 10, { count: 10 }) }}</text>

输出如下：

<text>car</text>
<text>cars</text>

<text>no apples</text>
<text>one apple</text>
<text>10 apples</text>

通过预定义的参数访问该数字

你无需明确指定复数的数字。可以通过预定义的命名参数 {count} 和/或 {n} 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。
语言环境信息如下：

const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}

模板如下：

<text>{{ $tc('apple', 10, { count: 10 }) }}</text>
<text>{{ $tc('apple', 10) }}</text>

<text>{{ $tc('banana', 1, { n: 1 }) }}</text>
<text>{{ $tc('banana', 1) }}</text>
<text>{{ $tc('banana', 100, { n: 'too many' }) }}</text>

输出如下：

<text>10 apples</text>
<text>10 apples</text>

<text>1 banana</text>
<text>1 banana</text>
<text>too many bananas</text>

自定义复数

但是，这种多元化并不适用于所有语言（例如，斯拉夫语言具有不同的多元化规则）。

为了实现这些规则，您可以将可选的 pluralizationRules 对象传递给 UvueI18n 构造函数选项。

使用针对斯拉夫语言（俄语，乌克兰语等）的规则的非常简化的示例：

function customRule(choice:number, choicesLength:number):number {
  if (choice == 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 == 1
  if (!teen && endsWithOne) {
    return 1
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return choicesLength < 4 ? 2 : 3
}

const i18n = createI18n({
  locale: 'ru',
  // the custom rules here ...
  pluralizationRules: {
    ru: customRule
  },
  messages: {
    ru: {
      car: '0 машин | {n} машина | {n} машины | {n} машин',
      banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
    }
  }
})

这将有效地实现以下目的：

<view>Car:</view>
<text>{{ $tc('car', 1) }}</text>
<text>{{ $tc('car', 2) }}</text>
<text>{{ $tc('car', 4) }}</text>
<text>{{ $tc('car', 12) }}</text>
<text>{{ $tc('car', 21) }}</text>

<view>Banana:</view>
<text>{{ $tc('banana', 0) }}</text>
<text>{{ $tc('banana', 4) }}</text>
<text>{{ $tc('banana', 11) }}</text>
<text>{{ $tc('banana', 31) }}</text>

结果如下：

<view>Car:</view>
<text>1 машина</text>
<text>2 машины</text>
<text>4 машины</text>
<text>12 машин</text>
<text>21 машина</text>

<view>Banana:</view>
<text>нет бананов</text>
<text>4 банана</text>
<text>11 бананов</text>
<text>31 банан</text>

切换tabBar文本

这是UvueI18n独有的功能，方便切换tabBar上的文本,暂定这个规则

const i18n = createI18n({
    tabBars: {
        'en-US': ['home','User Center'],
        'zh-CN': ['首页','用户中心'],
    }
})

日期时间本地化

由于APP不支持Intl.DateTimeFormat，故这功能无法在APP上使用。

日期时间格式如下：

const datetimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  'zh-CN': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
    }
  }
}

如上，你可以定义具名的 (例如：short、long 等) 日期时间格式，并需要使用 ECMA-402 Intl.DateTimeFormat 的选项。

之后就像语言环境信息一样，你需要指定 UvueI18n 构造函数的 dateTimeFormats 选项：

const i18n = createI18n({
  datetimeFormats
})

模板如下：

<text>{{ $d(new Date(), 'short') }}</text>
<text>{{ $d(new Date(), 'long', 'zh-CN') }}</text>

第一个参数是日期时间可用值（例如，timestamp）作为参数，第二个参数是日期时间格式名称作为参数。最后一个参数 locale 值作为参数。Date

<text>Jun 30, 2024</text>
<text>2024年6月30日周日 下午6:35</text>

数字格式

由于APP不支持Intl.NumberFormat，故这功能无法在APP上使用。

你可以使用你定义的格式来本地化数字。

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD', notation: 'standard'
    },
    decimal: {
      style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  },
  'zh-CN': {
    currency: {
      style: 'currency', currency: 'CNY', useGrouping: true, currencyDisplay: 'symbol'
    },
    decimal: {
      style: 'decimal', minimumSignificantDigits: 3, maximumSignificantDigits: 5
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  }
}

如上，你可以指定具名的 (例如：currency 等) 的数字格式，并且需要使用 ECMA-402 Intl.NumberFormat 的选项。

之后，在使用区域设置消息时，您需要指定以下选项：numberFormatscreateI18n

const i18n = createI18n({
  numberFormats
})

以下是在模板中使用的示例：$n

<text>{{ $n(10000, 'currency') }}</text>
<text>{{ $n(10000, 'currency', 'zh-CN') }}</text>
<text>{{ $n(10000, 'currency', 'zh-CN', { useGrouping: false }) }}</text>
<text>{{ $n(987654321, 'currency', { notation: 'compact' }) }}</text>
<text>{{ $n(0.99123, 'percent') }}</text>
<text>{{ $n(0.99123, 'percent', { minimumFractionDigits: 2 }) }}</text>
<text>{{ $n(12.11612345, 'decimal') }}</text>
<text>{{ $n(12145281111, 'decimal', 'zh-CN') }}</text>

第一个参数是作为参数的数值，第二个参数是作为参数的数字格式名称。最后一个参数 locale 值作为参数。

结果如下：

<text>$10,000.00</text>
<text>¥10,000.00</text>
<text>¥10,000.00</text>
<text>$988M</text>
<text>99%</text>
<text>99.12%</text>
<text>12.12</text>
<text>12,145,000,000</text>

API

获取方法 传参 locale，设置方法 传参locale format

例如：

// 可以手动引入i18n，例如你单独文件创建了i18n,就可以导入这个文件使用i18n
i18n.global.setLocaleMessage('zh-CN', zhCN)
i18n.global.getLocaleMessage('zh-CN')

// 如果是选择项API 可以使用
this.$i18n.global.setLocaleMessage

// 如果是组合式API 可以先获取当前组件实例
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance.proxy.$i18n.global.setLocaleMessage

setLocaleMessage

getLocaleMessage

mergeLocaleMessage

getDateTimeFormat

setDateTimeFormat

mergeDateTimeFormat

getNumberFormat

setNumberFormat

mergeNumberFormat

setTabBar

getTabBar

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。