您现在的位置是：首页 > 文章详情

Layui 近期一些值得关注的更新

日期：2025-04-18点击：12收藏

贤心不语，只是一味地在更新 Layui 2。

“自今年三月份开始，Layui 的版本迭代突然加速，接连发布了许多具有重要意义的更新，其中包含的一些新特性，也为 Layui 2 增添了一定的「生命力」”

动态

关于 Layui 不同版本的浏览器兼容说明：https://layui.dev/notes/browser-support.html
记录 Layui 2.x 系列版本主要升级变化：https://github.com/layui/layui/discussions/2565
Layui ts 类型声明文件，在编辑器中添加 Layui 的代码补全和文档提示：https://github.com/layui/layui/discussions/2598

新特性

新增 component 组件构建器

一直以来，Layui 的很多组件自成一体，使得无法对组件进行统一管理。尽管 Layui 也曾努力尝试改善这个问题，但很多时候为了向下兼容而又不得不保留许多旧有的特性，随着组件的增加，该问题也显得越加明显。

而 2.10 新增的 component 模块可以很好地填补这一缺憾，它的初衷正是为了确保 Layui 组件的一致性，如核心逻辑和 API 设计等，主要意义在于：给 Layui 2 系列版本提供一个构建通用组件的方式。

现在，您可以这样去创建 Layui 组件：

 /**  * tabs  * 标签页组件  */ layui.define('component', function(exports) {   // 创建组件   var component = layui.component({     name: 'tabs', // 组件名称     config: { // 组件默认配置项       // …     },     render: function() { // 组件渲染逻辑       // …     },     // 其他选项   });   // 将创建组件时返回的 `component` 对象作为组件的接口输出   // 组件将继承通用的基础接口，如 render, reload, set 等方法   exports(component.CONST.MOD_NAME, component); });

通过 component 创建的组件可继承它提供的全部基础接口，如：

这意味着你现在可以更加灵活地重构和扩展 Layui 组件了。

Layui 当前已经完成了对 tabs, rate 组件的重构，后续在条件允许的情况下，还有望通过 component 重构更多组件。

新增 tabs 组件加强版

tabs 是通过 component 重构的首个组件，它来自于最早试图发布的 Layui 3.0（后因为 3.0 技术路线的变化，而整理放至 2.10+ 版本中），目的是将 element 模块中的 tab 组件进行解耦，增强其可扩展性。

新 tabs 组件主要包含以下功能：

支持标签头部左右滚动模式，以应对复杂的多标签页使用场景
支持关闭当前标签和批量关闭「其他、右侧、全部」标签
支持关闭前后、切换前后等周期事件
支持标签「自动渲染、方法渲染、任意绑定」三种渲染方式
支持原 tab 组件的全部功能，并重新优化了界面和交互体验

为了给开发者必要的时间缓冲，Layui 旧 tab 组件会仍然保留在后续的若干版本中，但会在合适的时机对旧 tab 组件进行剔除，建议开发者尽量提前过渡到当前新的 tabs 组件。

增强 input-number 组件

新增限制允许输入的字符功能
新增 lay-step-strictly 属性，可开启步长严格模式，只能输入步长的倍数
新增 lay-wheel 属性，可通过鼠标滚轮或触摸板改变数值功能
新增按 Up/Down 键时改变数值功能

新增「无缝扩展任意外部模块」功能

Layui 在 2.11 版本新增了无缝扩展任意外部模块的支持，即无需遵循 Layui 模块规范的第三方库也能通过 Layui 去加载，并且无需对外部模块做任何的代码改动，只需在 layui.extend() 方法中声明模块名、路径和接口即可。

 // 扩展任意外部模块 layui.extend({   marked: {     src: 'https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.7/marked.min.js', // 模块路径     api: 'marked' // 接口名称   },   Prism: {     src: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',     api: 'Prism'   } }); // 加载扩展模块 layui.use(['marked', 'Prism'], function() {   console.log('任意外部模块 loaded: ')   console.log('  > marked: ', layui.marked);   console.log('  > Prism: ', layui.Prism); });

重构 laytpl 模板引擎

Layui 2.11 为 laytpl 赋予了面向更多复杂模板结构的解析能力。

新增 cache 选项，用于是否开启模板缓存
新增 condense 选项，用于是否压缩模板空白符
新增 tagStyle 选项，用于设置标签风格。默认仍采用 < 2.11 版本风格
新增 laytpl.extendVars() 方法，用于扩展模板内部变量
新增 compile 实例方法，用于清除缓存后以便渲染时重新对模板进行编译
新增在模板中通过 include() 方法导入子模板的功能
新增新的标签风格：{{ 语句 }} {{= 转义输出 }} {{- 原文输出 }} {{# 注释 }}
新增模板错误行捕获，可更精准地找到模板出错区域
提升模板解析的整体性能及稳定性
适配 Node.js 和浏览器端的使用场景

导入子模版示例：

 <template id="ID-demo-tpl-header">   <div>头部公共模板</div> </template> <template id="ID-demo-tpl-list">   <ul>     {{ d.items.forEach(function(item, index) { }}       <li>         <span>{{= item.title }}</span>         {{ if(item.children) { }}           {{- include('ID-demo-tpl-list', { items: item.children }) }}         {{ } }}       </li>     {{ }); }}   </ul> </template> <template id="ID-demo-tpl-main">   {{- include('ID-demo-tpl-header') }}   <h3>循环输出：</h3>   {{- include('ID-demo-tpl-list', { items: d.items }) }} </template>

更多更新

Layui 还将 jQuery 升级到 v3.7.1，并调整将最低浏览器兼容标准过渡到 IE9（如需兼容 IE8，可使用 2.9.x 版本），以及优化 layui.js 大量核心。

具体更新日志可前往官网文档和 Github 查看：

后续计划

官方曾公布过 Layui 3.0 版本计划：

基于当前国内外的前端技术格局，以及 Layui 既有的受众形态，我们决定启动 Layui 3.0 的升级计划。同时，也为进一步体现 Web UI 组件库的多样化和差异化，Layui 3.0 将采用纯原生的 JavaScript CSS HTML 进行开发，以更好地适应于未来。

…

Layui 3.0 是一次需要毅力、信心及其他多重条件允许的重大更新，既是对 2.x 开发模式的部分延续，更是一次全方位的加强，力图为国内的 Web 应用开发提供多一种的技术选型，继续发挥它应有的历史价值。

https://layui.dev/notes/3.0/milestone.html

不少 Layui 使用者都在关心 Layui 3 的进展。

作者不语，只是一味地在更新 Layui 2。

尽管 2.x 已基本够用了。

虽然具体的发布日期无法获悉，但对于 3.0 的内容有以下几点可以明确：

Layui 3 将剔除 jQuery 的依赖，也不打算采用当前主流的前端基础库或框架，而是基于纯原生的 JavaScript CSS HTML 进行完全重构，以更加轻量的姿态适应未来。
Layui 3 将全面拥抱 ES Modules、Web Components 等更多现代浏览器技术，理论上可用于 Vue, React 等任何技术栈。
Layui 3 有望支持多语言。

期待 Layui 能在灿若繁星的 Web UI 组件库中贡献一份多样化的选择。

借用团队的一句原话作为结语：