Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sweetui/sweet-mobile

Package Overview
Dependencies
Maintainers
3
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sweetui/sweet-mobile

Sweet Mobile Core

  • 2.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
3
Weekly downloads
 
Created
Source

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文档

Keywords

FAQs

Package last updated on 12 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc