@sweetui/sweet-mobile

sweet-i18n 国际化

Code

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

// 国际化
sweetI18n().then(i18n => {
// 初始化 App
  const SweetApp = new Vue({
    el: '#app',
    render: c => c('app'),
    ...
    // 注入i18n
    i18n,
  });
})

语言包分成3种情况

• 设置在项目工程 src/lang 目录下
• 走网络接口请求获取
• 俩者都有,且如有重复,接口数据会覆盖项目.js文件的字段值 所以程序初始化要写在sweetI18n().then(i18n => ...)函数里面

sweetI18n方法可提供一个参数，必须是Promise函数。Demo如下，用于从接口获取语言包

/* 模拟ajax请求 */
sweetI18n(() => {
  return new Promise((resolve, reject) => {
    const onlineDate = {
      zh: { o: '哦哦哦' },
      en: { o: 'OOO' },
    }
    setTimeout(() => {
      resolve(onlineDate)
    }, 100)
  })
}).then(...)

// 真实ajax
sweetI18n(() =>{
  return new Promise((resolve, reject) => {
    this.SWTOOL.get('url').then(data => {
      resolve(data)
    }).catch(() => reject)
  })
}).then(...)

注: 返回的data数据格式必须严格

const data ={
  zh: { o: '哦哦哦' }, // zh => 语言lang 和 src/lang目录下的zh.js文件名保持一致
  en: { o: 'OOO' }, 
}

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

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

• setI18nLanguage方法,用于切换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文档