@fox-js/i18n

fox-i18n

国际化插件

Install

NPM

npm i @fox-js/i18n -S

YARN

yarn add @fox-js/i18n

语言支持

语言	文件名	版本
英语	en-us	v4.0.0
简体中文	zh-cn	v4.0.0
繁體中文	zh-tw	v4.0.0

目录结构

src
├── i18n
    ├── index.ts
    └── languages
        ├── en_us.ts
        └── zh_cn.ts

languages目录

放置语言文件，按照语言名称命名，如果中文zh_cn的文件命名为zh_cn.ts,英文en_us的文件命名为en_us.ts

index.ts文件

在index.ts文件中，导入languages目录下的语言文件，并创建FoxI18n实例

使用指南

步骤一.创建实例

文件 src/i18n/index.ts

// 导入i18n库
import { createFoxI18n, messageMerge } from '@fox-js/i18n'
// 导入英文语言文件
import en_us from './languages/en_us'
// 导入中文语言文件
import zh_cn from './languages/zh_cn'
// 导入foxui库中的语言文件
import baseMessages from '@fox-js/foxui/locale'

// 合并语言文件
const messages = messageMerge(baseMessages, {
  en_us,
  zh_cn
})

// 创建i18n实例
const i18n = createFoxI18n({
  type: 'defualt', //i18n类型
  legacy: false, // vue3 or vue2风格支持
  locale: 'zh_cn', // set locale
  messages // 语言
})
export default i18n

createFoxI18n 参数说明

• type: i18n对象的类型，目前支持vue-i18n和default两种，default类型只提供了基础的国际功能支持，可以在web和小程序端运行，而vue-i18n的功能比较强大，但不能运行在小程序端。
• legacy: 是否支持传统模式，设置true则支持Optional API，设置为false则支持Composition API。
• locale: 设置语言 zh_ch or en_us
• messages: 语言信息

步骤二.注册实例

在src/main.ts文件中导入i18n实例，并注册在vue app中

//导入i18n实例
import i18n from './i18n'
//注册i18n实例
createApp(App).use(fox).use(i18n).use(FoxUI, uiOptions).mount('#app')

步骤三.使用

Optional API

<template>
    <span>{{$t('name')}}</span>
</template>

Composition API

<template>
    <span>{{t('name')}}</span>
</template>

<script lang="ts" setup>
   import { useFoxI18n } from '@fox-js/i18n'
   const { t } = useFoxI18n()
</script>

API说明

语言message格式

在这里只说明defaut和vue-i18n都支持的格式

具名格式

语言环境信息如下

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

模板如下：

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

输出如下：

<p>hello world</p>

列表格式

语言环境信息如下：

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

模板如下：

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

输出如下：

<p>hello world</p>

翻译方法

useFoxI18n

获取国际化api，如

const {t} = useFoxI18n(scope?string, options?:FoxI18nOptions)

参数 scope可以设置api的默认方法，下面两个例子的结果是一致的

messages

const messages = {
  zh_cn: {
    login:{
      submit: '登录'
    }
  }
}

方式一

<script lang="ts" setup>
   const { t } = useFoxI18n()
</script>

<template>
  <fox-button>{{t('login.submit')}}</fox-button>
</template>

方式二（推荐）

<script lang="ts" setup>
   const { t } = useFoxI18n('login')
</script>

<template>
  <fox-button>{{t('submit')}}</fox-button>
</template>

方式一和方式二结果是一致，方式二在useFoxI18n中使用了默认scope，后续的t方法就可以省略scope。

toLocalRefs 与 toLocalRef

把组件中的属性，设置为支持国际化的只读计算属性

messages

const messages = {
  zh_cn: {
    myText:{
      placeholder: '请输入'
    }
  }
}

组件 my-text

<script lang="ts" setup>
import { useFoxI18n } from '@fox-js/i18n'

// 定义属性
const props = defineProps({
  //提示
  placeholder:{
    type:String,
    default:''
  }
})
// 获取国际化api
const { toLocaleRefs, toLocaleRef } = useFoxI18n('myText')
// 获取支持国际化的新属性 
const { placeholder } = toRefs(props,['placeholder'])

</script>

<template>
  <input type="text" :placeholder="placeholder"></input>
</template>

// 获取支持国际化的新属性 
const { placeholder } = toRefs(props,['placeholder']) //批量

//or

const placeholder = toRefs(props,'placeholder'） //单个

等于同与

const placeholder = computed(()=>{
   return props.placeholder || t('placeholder') || t(`${props.placeholder}`)
})

localeRef

创建国际化只读计算属性

// 获取国际化api
const { localRef } = useFoxI18n('myText')
// 获取支持国际化的新属性 
const  placeholder = localRef('placeholder')

等于

// 获取国际化api
const { t } = useFoxI18n('myText')
// 获取支持国际化的新属性 
const placeholder = computed(()=>{
   return t('placeholder')
})