Layui + jQuery.i18n 国际化实现

最新推荐文章于 2023-12-14 18:11:24 发布

weixin_43367510

最新推荐文章于 2023-12-14 18:11:24 发布

阅读量3.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43367510/article/details/116304266

版权

前言

Layui 是一套开源的模块化前端UI框架，其内部采用的是自身经典的模块化规范，并遵循原生HTML/CSS/JS开发方式，极易上手，拿来即用。虽然有很多功能强大、模块丰富，但还缺少一个国际化模块。

模块实现

封装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);
});