multi-lang-js
v1.3.17
Published
javascript multilingual loader, combined with vue and other frameworks, configuring the txt file language package.
Downloads
20
Readme
前端多语言(json文件)加载器
script引入:
https://xxxx/js/multi-lang.js
npm安装
npm install multi-lang-js --save
使用示例
<script src="/assets/js/vue.min.js"></script>
<script src="https://xxxx/js/multi-lang.js"></script>
<script>
var vue_app_body = new Vue({
el: '#bigo_lang_e',
data: {
langContent:{
}
}
});
// 1:
var multiLang = new MultiLang()
//2:import multiLang from 'multi-lang-js';
multiLang.init({
path: 'css/',
dataType:'json',
name: {
'en': 'lang_en.txt',
'cn': 'lang_cn.txt',
'tw': 'lang_cn.txt',
'th': 'lang_th.txt',
'vn': 'lang_vn.txt',
'ru': 'lang_ru.txt',
'ko': 'lang_ko.txt',
'id': 'lang_id.txt'
},
callback: function(data, langName){
vue_app_body.langContent = data;
// 第二个参数推荐不再使用,为了兼容而存在。返回的是浏览器语言名。如 cn
// 如需获取语言相关。请用 this.appLang 等。请看其3个语言相关属性。
}
});
</script>
对象multiLang,有3个语言相关属性
|属性名|类型|说明| |:----- |:-----|----- | |appLang |str |对象初始化即可获得,如:cn | |appLangString |str |对象初始化即可获得,如:zh-cn | |packageLang |str |init()之后获得,表示加载的语言包。如 vn |
multiLang.init() 初始化参数说明
|参数名|类型|说明| |:----- |:-----|----- | |path |str |翻译文本的相对路径,这里我把所有翻译文本放到css文件夹下 | |dataType |str |值为 txt 或者json。可忽略此参数,默认为json,值为txt时,则返回的是txt文本 | |name |obj |各个语言对应加载的翻译文本,属性名不可改,对应的文本名字可以改 | |callback |fun |回调的第一个参数是加载到的json(或者文本)数据,该函数中this指向new出的对象 |
multiLang.setLang(langname,callback) 设置语言 **如果你觉得multiLang.setLang 使用麻烦,也可以:localStorage.lang=langname,这种写法 ** **注意:设置语言,会让全站语言都立马改动,demo可参考github上的页面。开多个页签试试 **
|参数名|类型|说明| |:----- |:-----|----- | |langname |str |必须设置,你要设置的语言名 | |callback |function |可选的回调函数 |
测试支持 初始化判断何种语言:先查浏览器地址栏参数有lang 参数,其次查 localStorage.lang的值,最后看浏览器语言
所以为了测试预览,你可以在地址后带入参数,lang=en(你想要的语言)。
说明 如果你配置的name中,没有(比如当前埃及用户访问),则尝试使用en(英文),如果英文也没有配置,则使用配置的“第一个”语言包。
1.3.0改动 去除 从localstorage获取语言码的逻辑
1.3.1改动 增加 bn 孟加拉语 ne 尼泊尔语两种 多语言
1.3.2 增加阿语标识ar-er , 增加柬埔寨语的语言选择
1.3.3
增加多语言支持
['gu', 'gu,gu-in'], // 古吉拉特语
['kn', 'kn,kn-in'], // 埃纳德语
['mr', 'mr,mr-in'], // 马拉地语
['pa', 'pa,pa-in'], // 旁遮普语
['ta', 'ta,ta-in'] // 泰米尔语
1.3.4 增加多语言支持 ['te', 'te,te-in'], //泰卢固语
1.3.5 增加多语言支持 ['fil', 'fil-PH'], //菲律宾语
1.3.6
修正菲律宾语的支持
['fil', 'fil-ph'], //菲律宾语
增加意大利语的支持
['it','it,it-ch,it-it'], //意大利语
1.3.7
修改输出变量名称,防止某些包打包工具会认为MultiLang 重复声明
var multiLangInstacne = new MultiLang();
export default multiLangInstacne
1.3.8
增加多语言支持
['uk', 'uk,uk-ua'], //乌克兰语
['be', 'be,be-by'], //白俄罗斯语
['kk', 'kk,kk-kz'], //哈萨克语
1.3.9 忽略
1.3.10 修复bug
1.3.11
增加初始化参数 queryLang,
如果设置了该值,取多语言将会从url上获取该参数作为语言码
eg
multiLang.init({
queryLang: 't'
})
若访问 页面index?t=ar 则会映射到ar阿拉伯语
若访问 index?t=ar&lang=en 依然会映射到ar阿拉伯语,因为queryLang优先级高于默认的"lang"参数
若访问 index?lang=en 映射到英语,因为t参数缺失,使用默认参数'lang'
1.3.12
--增加多语言
['fa', 'fa,fa-ir'], //波斯语
['da', 'da,da-dk'], //丹麦语
['ml', 'ml,ml-in'], //马拉雅拉姆语
['or', 'or,or-in'], //奥里雅语
--将queryLang获取的参数自动转为小写
eg.
multiLang.init({
queryLang: 't'
})
若访问页面 index?t=AR 将会转化为ar再做语言码映射
1.3.13
--增加方法strMapToLang
传入浏览器语言参数,返回对应的语言码
eg
multiLang.strMapToLang('zh-hans') //cn
multiLang.strMapToLang('vi-vn') //vn
1.3.14
完善柬埔寨语(高棉语)的浏览器标识
['kh', 'kh,km-kh']
1.3.15
--增加多语言
['as', 'as-in'],//阿萨姆语
['ka', 'ka-ge'],//格鲁吉亚语
['sa','sa-in'],//梵语
['uz','uz-latn,uz-latn-uz,uz-cyrl,uz-cyrl-uz'],//乌兹别克语
1.3.16
--多语言增加同名标识
如
['as', 'as,as-in']
1.3.17 --增加西语的标识 es-us