@sweetui/sweet-mobile

sweet-i18n 国际化

Code

import { sweetI18n } from '@sweetui/sweet-mobile';

// 国际化
Vue.use(sweetI18n)

const SweetApp = new Vue({
  ...
  // 注入i18n
  i18n: sweetI18n.i18n,
});

• 项目app.config.js文件 可配置language 设置初始语言。

本地缓存SWEETLANG字段 > appConfig.language值 > navigator.language

• setI18nLanguage方法,用于切换lang语言包的方法，已注册到全局。

/**
 * 设置语言包
 * @param {String} lang 语言文件名称 en-US
 */
function $i18nLanguage(lang) {
  ....
}

this.$i18nLanguage(lang)

• lang必须与@/lang/*目录下的文件名相同

• 语言包路径 @/lang/* 即 src/lang/* 例: lang=zh 对应 zh.js

i18n 格式和调用

基础定义

export default {
  message: {
    test: 'hello'
  }
}

调用

{{$t("message.test")}} or <p v-html="$t('message.hello')"></p>

HTML格式

在某些情况下，您可能希望将翻译呈现为HTML邮件而不是静态字符串。

export default {
  message: {
    hello: 'hello <br> world'
  }
}

模板如下：

<p v-html="$t('message.hello')"></p>

输出下面的内容（而不是预先格式化的信息）

<p>hello
<!--<br> exists but is rendered as html and not a string-->
world</p>

命名格式

语言环境消息如下：

export default {
  message: {
    hello: '{msg} world'
  }
}

模板如下：

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

输出如下：

<p>hello world</p>

列表格式

语言环境消息如下：

export default {
  message: {
    hello: '{0} world'
  }
}

模板如下：

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

输出如下：

<p>hello world</p>
列表格式也接受类似数组的对象：

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

输出如下：

<p>hello world</p>

支持轨道i18n格式的红宝石

语言环境消息如下：

export default {
  message: {
    hello: '%{msg} world'
  }
}

模板如下:

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

输出如下：

<p>hello world</p>

多元化

你可以翻译成复数形式。您必须定义具有管道|分隔符的区域设置，并在管道分隔符中定义复数形式。

语言环境消息如下：

export default {
  car: 'car | cars',
  apple: 'no apples | one apple | {count} apples'
}

模板如下：

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

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

输出如下：

<p>car</p>
<p>cars</p>

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

更多请参考vue-i18n文档