默认主题
国际化

单文件构建版

通过<script>直接引入对应的语言包文件,此时会自动注册相应的语言包。

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/intact/dist/intact.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/kpc/dist/kpc.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/kpc/dist/i18n/en-US.min.js"></script>

通过webpack引入

如果你使用多文件构建版本,可以像下面这样,在入口文件中引入相应语言包,然后通过localize函数注册

import {localize} from 'kpc';
import i18n from 'kpc/i18n/en-US';

localize(i18n);

_$(key, [data])函数

kpc提供了一个_$(key, [data])函数,可以用来实现非kpc组件的国际化。首先我们使用上面提到的localize(data)函数来注册所有翻译字典

import {localize} from 'kpc';
import i18n from 'kpc/i18n/en-US';

const dict = {
    '测试': 'test'
};

// 将kpc提供的字典和自定义自定合并传给localize
localize({...dict, ...i18n});

然后我们就可以在代码中使用_$来获取翻译结果了

import {_$} from 'kpc';

<Button>{{ _$('测试') }}</Button>

参数说明

  1. key 要获取翻译字典的key,如果在字典中找不到对应的key,则直接返回key。所以当我们使用中文当key时,无需为中文提供字典数据,它会直接返回中文key。支持类似lodash的通过path取值

  2. data 附加数据。通过它我们可以实现变量替换,以及英语中的单复数变换,例如:

const dict = {
    '最多选择{n}项': 'Please select no more than {n} item{s:n}.'
};
localize(dict);

_$('最多选择{n}项', {n: 1}); // output: Please select no more than 1 item.
_$('最多选择{n}项', {n: 2}); // output: Please select no more than 2 items.

可以看到通过{n}语法,可以实现变量替换,其中{s:n}的含义为:当n大于1时,输出s。对于单复数需要变化后缀的情况可以这样做:例如lea{f|ves:n} wom{an|en:n}