layui国际化-jQuery.i18n组件

前言

layui是一款非常便捷的，并且是主要应用于后台管理的一款前端框架。虽然layui的功能非常强大，有很多的功能模块，但是人无完人，框架也是一样，layui并没有一个国际化的模块，这里我们是吧jQuery的i18n集成到了layuiadmin.

模块扩展

与扩展echarts一样我们再config.js文件配置国际化然后把文件放入相对应的文件夹

配置读取语言包的方法

layui.define(['i18n','jquery'],function (exports) {
			var i18n=layui.i18n
				,$=layui.jquery;
				
				i18n.properties({
						name: 'layui', // 资源文件名称
						path: '../dist/i18n/', // 资源文件所在目录路径
						mode: 'map', // 模式：变量或 Map 
						language: lang, // 对应的语言
						cache: false,
						encoding: 'UTF-8',
						callback: function () {
						//这里是我通过对标签添加选择器来统一管理需要配置的地方
							$("[lang-title]").each(function (e) {
								$(this).attr("title",i18n.prop('lang_title_'+$(this).attr("lang-title")));
							})
							$("[lang-pla]").each(function (e) {
								$(this).attr("placeholder",i18n.prop('lang_pla_'+$(this).attr("lang-pla")));
							})
							$("[lang-ht]").each(function (e) {
									
								console.log(i18n.prop('lang_ht_'+$(this).attr("lang-ht")));
								$(this).html(i18n.prop('lang_ht_'+$(this).attr("lang-ht")));
							})
						}
				})
			}),exports("i18np", {})		
				
}); 

使用

在需要用到国际化的面页加载此js模块

layui.use('i18np', layui.factory('i18np'));

table模块与laypage里面固定的文字需要通过修改源码，其实改动不大（这里直接贴图）

如果layui很熟练的话看下源码就知道要修改那里了。。。

layui分页国际化

  因为官方没有国际化api，所以只能修改源文件了，页面是用的JSP

1、先导入jquery国际化依赖

<script src="${base}/lib/jquery/jquery.i18n.properties.min.js"></script>

<script>
    // 国际化语言(方便在js中获取)
    let language = '${lang}';

    $.i18n.properties({
        name: 'strings',
        path: base + '/resources/i18n/',
        mode: 'map',
        language: language,
        async: false
    });

    //初始化i18n函数
    function i18n(msgKey) {
        try {
            return $.i18n.prop(msgKey);
        } catch (e) {
            return msgKey;
        }
    }

    //获取国际化翻译值
    //console.log(i18n('user.login.username'));

</script>

2、新增国际化

3、修改 laypage.js

4、最终效果(英文随便翻译的)

前言

模块实现

封装jquery.i18n.propertites.js 为i18n.js

layui.define(["jquery"], function (exports) {
  "use strict";
  var $ = layui.jquery;
  
	```jquery.i18n.propertites.js```
	
	exports("i18n", $.i18n);
});

i18np.js 配置语言包方法

layui.define(["jquery", "i18n"], function (exports) {
  var $ = layui.jquery,
    i18n = layui.i18n;

  var i18np = {};
  
  i18np.load = function () {
    i18n.properties({
      name: "demo", // 资源文件名称
      path: "/WebUI/dist/i18n/", // 资源文件所在目录路径
      mode: "map", // 模式：变量或 Map
      language: lang, // 对应的语言
      cache: false,
      callback: function () {
        //这里是我通过对标签添加选择器来统一管理需要配置的地方
        // $(".layui-select-tips").html(i18n.prop("pla-select"));
        $("[lang-title]").each(function (e) {
          $(this).attr(
            "title",
            i18n.prop($(this).attr("lang-title"))
          );
        });
        $("[lang-pla]").each(function (e) {
          $(this).attr(
            "placeholder",
            i18n.prop($(this).attr("lang-pla"))
          );
        });
        $("[lang-ht]").each(function (e) {
          // console.log(i18n.prop($(this).attr("lang-ht")));
          $(this).html(i18n.prop($(this).attr("lang-ht")));
        });
      },
    });
  };
  i18np.load();
  exports("i18np", i18np);
});

与扩展echarts一样我们再global.js文件配置国际化然后把文件放入相对应的文件夹

文件目录

使用