4.0.1-0 • Published 2 months ago
@fox-js/i18n v4.0.1-0
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')
})