layui框架国际化的实现

项目场景:

要对一个前端使用layui的项目进行国际化,但是layui好像没有实现国际化,所以需要自己手动实现。


软件版本:

layui版本:layui-v2.5.6

jquery版本:3.5.1.min

解决方案:

  • 需要国际化的内容主要有
  1. 日期输入框
  2. 分页栏
  3. 弹出框(页面)的标题、按钮等
  4. 弹出框(页面)的内容
  5. 页面其它内容
  6. js方法中的值
  • 解决思路:
  1. 日期输入框:利用layui时间日期控件的lang属性
  2. 分页栏:重写laypage.js
  3. 弹出框(页面)的标题、按钮等:在js中控制值
  4. 弹出框(页面)的内容:在js中控制值
  5. 页面其它内容:在dom元素中自定义属性,并将对应的国际化code放入,页面加载完对dom属性进行遍历,替换自定义属性为对应的国际化值
  6. js方法中的值:在js中控制值

具体实现:

  1. 编写国际化配置文件
  2. 引入 jquery.i18n.properties.js(点此下载) ,用于解析国际化配置文件
  3. 编写language.js,用于根据code获取国际化值及替换dom元素中的code为国际化值
  4. 重写laypage.js(点此下载修改过的文件),将分页栏国际化
  • properties配置文件:

\resources\static\languages\systemInfo_en_US.properties:

userNo=User No
userName=User name
userType=User type

\resources\static\languages\systemInfo_zh_CN.properties:

userNo=用户编号
userName=用户名称
userType=用户类型
  • language.js:

以下代码替换页面标签中的data-i18n、placeholder-i18n、href-i18n属性。data-i18n对应的国际化值会放入标签的innerTEXT中;placeholder-i18n的国际化值会放入placeholder属性;href-i18的国际化值会放入href属性;要替换其它属性请自行添加。

language()方法,用于根据给定的code返回国际化值。

代码还包括对easyui中linkbutton、window、panel等的处理示例,实际没有用。

使用时将initPage()方法放入要国际化页面的onload()方法中即可。

function initPage(){
    	if($.cookie("langType")){
    		loadProperties($.cookie("langType"));
    	}else{
    		loadProperties("zh_CN");	
    	}
    } 
function loadProperties(language){
    jQuery.i18n.properties({
    name:'systemInfo_'+language,
    path:"/languages/",
    mode:'map',
    callback: function() {
    	$("[data-i18n]").each(function () {
    		if($(this).hasClass("easyui-linkbutton")){
    			//初始化按鈕
        		$($(this).children().children()[0]).html($.i18n.prop($(this).attr('data-i18n')))
    		}else if($(this).hasClass("easyui-window")){
    			//初始化彈窗title
    			$($(this).prev().children()[0]).html($.i18n.prop($(this).attr('data-i18n')))
    		}else if($(this).hasClass("easyui-panel")){
    			//初始化彈窗title
    			$($(this).prev().children()[0]).html($.i18n.prop($(this).attr('data-i18n')))
    		}else{
    			//初始化普通標籤
    			$(this).prepend($.i18n.prop($(this).attr('data-i18n')))
    		}
        });

		$("[placeholder-i18n]").each(function () {
			$(this).attr("placeholder",$.i18n.prop($(this).attr('placeholder-i18n')));
		});

		$("[href-i18n]").each(function () {
			$(this).attr("href",$.i18n.prop($(this).attr('href-i18n')));
		});
    }  
    });  
}

function language(key){
	return $.i18n.prop(key);
}
  • html示例:
  • js示例:

其中,btn: [language('btn.confirm'), language("btn.cancel")] 用于替换layui确认框中的按钮

function delRowOpen(){
	let selected = layTable.checkStatus('qryGrid');
	if(selected.data.length!==1) {
		layer.msg(language('msg.selectOneToDelete'));
		return;
	}
	selected = selected.data[0];
	if(!selected.id){
		layer.msg(language('msg.selectedKeyIsNull'));
		return;
	}
	layer.confirm(
		language("sys.confirmDel")
		, {icon: 0, title:language("sys.info"),btn: [language('btn.confirm'), language("btn.cancel")]}
		, function(index) {
			let param = {
				'id' : selected.id,
				'random' : Math.random()
			};
			$.ajax({
				url : ctx + "/kv/del",
				type : "POST",
				data : param,
				success : function(res){
					if(res.success){
						queryList();
					}
					layer.msg(res.msg);
				}
			});
			layer.close(index);
		});
}
  • 注意事项:

如果在js中编辑页面标签,要使用language()方法拼接,不能使用data-i18n、placeholder-i18n、href-i18n等属性,因为页面加载后onload()方法中已经执行过initPage()方法,此后再动态添加的页面dom元素不会再进行属性替换。

function aa(d){
	let value = d['machineAttr'];
	if(!value||value.length===0){
		return "-";
	}
	return ""+language('show')+"";
}
  • 修改语言:
    function changeLang(lang) {
        $.cookie("langType",lang);
        location.reload();
    }

你可能感兴趣的:(前端#JavaScript,前端#jquery,layui,前端,javascript,html,前端框架)