layui开发使用文档：Layui-v2.68 入门指南

需积分: 48 123 浏览量更新于2024-07-09 收藏 12.84MB PDF 举报

"layui-v2.68.pdf 是一份关于layui框架的离线开发文档，内容涵盖layui的入门指南、兼容性、获取方式以及快速上手等知识点。layui是一个开源的WebUI解决方案，注重模块化规范，适用于后端开发者，支持大部分现代浏览器，不包括IE6/7。" layui框架是一个流行的前端UI库，其设计思想在于简洁轻盈且功能丰富，允许开发者以原生HTML/CSS/JS的方式进行开发，避免复杂的前端构建工具。layui的核心特点在于其模块化的结构，使得开发者可以按需引入所需的组件，从而提高开发效率。在兼容性方面，layui兼容所有现代浏览器，但不支持较为老旧的IE6和IE7。这使得它成为一个适合多种场景的Web界面开发方案，无论是在企业级应用还是个人项目中都能看到它的身影。获取layui的方式多样，用户可以通过官方网站下载官方预编译的版本，包含核心样式文件`layui.css`和核心库文件`layui.js`，以及字体图标目录。此外，对于开发者来说，可以从Git仓库（如GitHub或码云）下载完整开发包，进行二次开发。layui也支持通过npm进行管理，方便集成到前端构建流程中。同时，第三方CDN服务如UNPKG和CDNJS提供了layui的在线引用，简化了项目中的依赖引入。快速上手layui，开发者可以引入提供的CSS和JS链接，例如使用UNPKG CDN服务，通过以下代码引入layui的样式和脚本： ```html <link rel="stylesheet" href="//unpkg.com/layui@/dist/css/layui.css"> <script src="//unpkg.com/layui@/dist/layui.js"> ``` 这些链接会自动获取layui的最新版本。layui提供了详尽的开发使用文档，帮助开发者理解和掌握各个组件的使用方法，从基础元素到复杂组件，覆盖了表单、表格、按钮、弹窗、图片上传等多种功能。 layui是一个面向后端开发者，兼顾易用性和功能性的前端框架，它的灵活性和全面的文档支持使得它成为快速构建Web界面的得力工具。通过学习和掌握layui，开发者可以提升项目开发速度，同时保持界面的美观和一致性。

Layui 更新日志

https://www.layui.com/doc/base/changelog.html[10/11/2021 5:32:16 PM]

v2.6.3/4

[优化] layui.use() 核心机制：1) 确保 html 文档被完全加载就绪再执行回调；2) 当第一个参数为 function 时，

则表示加载所有内置模块，且执行的回调即为该

function

参数；（该优化是对

2.6

版本的一次真正巩固，确保

了

2.6.0

推荐的「所有内置模块一次性加载」的可行性，可以说是里程碑式的改进，极大地纠正了开发者因不

规范代码而造成的各种异常，且对之前版本采用的异步按需加载模块的代码，实现了无缝兼容）

文档

[新增] all 内置模块，用于在开发模式（即引入源码的 src 目录）时加载所有内置模块

[新增] table 组件对合计行自定义模板的支持，即当 totalRow 参数为 string 类型时可解析为动态模板。

文档

[优化] layer 组件的 close 方法在对初始打开的弹层执行关闭时，可能存在的极少概率无法关闭的问题

[优化] layDate 组件日期范围内的样式

[新增] table 组件加载失败时的 error 回调

[优化] 按钮的尺寸，纯背景色按钮与带边框的按钮，在同等字符长度下尺寸相同

[优化] 时间线只有一条数据时仍然显示线的问题，并优化其他细节

[优化] 管理系统大布局样式，滚动条采用 body 默认，而非之前的 layui-body 所在的元素

v2.6.0

该版本重要提示：

[调整] 将所有内置模块构建为一个文件，这意味着当你引入的是从官网下载（或者开源平台下载的 dist

目录）的 layui.js，则不必再按需异步加载内置模块，直接即可使用 layui 所有组件库。该调整对模块化

的写法不受影响。

但需注意以下几点：

1) 如果之前引入了 layui.all.js 的，现在必须改成 layui.js

2) 如果元素存在动态插入，那么您需要执行元素所对应组件的 render() 方法，如 form.render()

3) 引入 layui.js 的 <script> 标签最好放置在 body 末尾。这是为了能对一些元素进行自动渲染。

[调整] table 组件的 table.reload(id, options, deep) 方法，可通过 deep 参数控制是否采用深度重载（即

参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认为浅重载。

说明

请注意：如果你之前已经习惯深度重载模式的，现在请在第三个参数中，加上 true，如：

table.reload(ID, options, true); //

这样就跟

v2.5.7

及之前版本处理机制完全一样。

[新增] dropdown 通用下拉菜单组件

文档

示例

亦可作为「右键菜单组件」使用

2021-04-05 / 2021-04-06

v2.6.2 2021-04-02

v2.6.1 2021-03-31

2021-03-31

Layui 更新日志

https://www.layui.com/doc/base/changelog.html[10/11/2021 5:32:16 PM]

[支持] 无限层级嵌套

[支持] 子级菜单的横和竖两种展示方式

[支持] 局部或全局的自定义菜单列表模板，可给菜单列表添加任意元素（图片、图标等）

[支持] 自定义事件，可通过 click、hover、contextmenu（鼠标右键）等等方式调出组件面板

[支持] className、style 属性，用于对组件的样式重置

[新增] 基础菜单（layui-menu）样式结构，可无限层级嵌套

文档

示例

[新增] 常规面板（layui-panel）样式结构

[优化] layer 组件的核心代码，当初始执行弹窗时，不必再套一层 layer.ready() 了

[优化] layer 组件局部样式，以更贴近简约和百搭

[优化] layDate 组件的日期范围选择，不再是之前一样左右联动的操作方式，而是左右保持完全独立的选择

[优化] layDate 组件局部样式，及剔除多余 js 代码

[修复] layDate 组件中当设为年/月选择器时，点击选择年/月数值时，面板未自动关闭的问题

[修复] layDate 组件当 lang 设置为 'en' 时，部分提示内容未显示英文的问题

[新增] table 组件的 table.getData(id) 方法，用于获取表格当前页的所有行数据（现在不必再通过 table.cache

获取）

[修复] table 组件的 table.reload() 重载方法在多次执行时，会携带上一次执行时的参数的重大 BUG

[新增] util 组件的 unescape(str) 方法，用于将转义后的 HTML 还原

[优化] code 组件整体样式

[优化] 整体边框/背景等色调，以及边距尺寸，以使得视觉搭配更加和谐自然

[优化] 按钮部分样式细节，以及新增对边框按钮各种色系的更好支持

示例

[优化] hr 横线样式，以防止某些情况出现边框模糊的问题

[新增] 新增 CSS3 从顶部往下滑入、微微往下滑入、平滑放小、弹簧式放小四种动画，并优化部分过度动画

文档

[新增] layui-font-* 样式，可定义常见字体大小和颜色

文档

v2.5.7

[新增] layui.off(events, modName) 方法，用于移除模块相关事件的监听 #详见文档

[优化] layui.device() 方法，加入 mobile 属性，用于识别是否是在移动设备中

[优化] form 组件的 verify 方法，如果返回 true，则不自动弹出提示框

[修复] table 组件无数据时且开启初始排序功能，未显示「无数据」提示文案的问题

[优化] slider 组件多处细节样式以及数字输入框始终保持显示

[修复] slider 组件在设置 setTips 自定义提示文本时，change 回调返回的 value 也随之改变问题

[修复] slider 组件在点击数字输入框加减按钮时，起始值未按初始值进行计算的问题

[修复] rate 组件的 value 大于 length 时的文本显示异常问题

[修复] tree 等部分组件在低版本浏览器下的若干问题

v2.5.6

2.5.x

2020-11-27

2020-01-15

Layui 更新日志

https://www.layui.com/doc/base/changelog.html[10/11/2021 5:32:16 PM]

[优化] layui.use() 方法，以支持加载非内置模块的合并请求（如您在线上环境采用「非模块化加载」的方式，

那么最多可以只加载两个文件，即：

layui.all.js

、

main.js(

你的扩展模块的合并文件

)

。这将大幅度减少文件请

求） #详见文档

[新增] layui.url() 底层方法，用于将 url 中的 pathname、search、hash 属性进行对象化获取 #详见文档

[优化] 栅格的列间隔类 .layui-col-space，支持 1-30 区间所有双数间隔，并支持 1、5、15、25 单数间隔

[优化] table 组件的合计行，若接口直接返回了合计行数据，则优先读取，否则由前端自动合计当前行数据 #详

见文档

[修复] upload 组件因上个版本的 progress（进度条）功能导致的部分情况无法跨域上传的问题

[优化] upload 组件 progress 回调，在第二个参数中返回了当前触发的元素对象

[修复] form 模块的 select 组件在 lay-disabled 和 lay-search 共用时出现可编辑问题

[修复] flow.load() 多次执行时的重复加载的问题

[修复] util 组件的 event 方法重复绑定事件的问题

[新增] 28 个字体图标 #详见文档

v2.5.5

之前大家在《2.5.x 问题集中收集》中反馈的内容，我已如数看到。其中有些被采纳在本次版本中，有些被

规划到了

v2.6

、

v3.0

中。我深知之前反复的断更对

layui

带来的是怎样无可挽回的损失，然而

layui

终于还

是不得不重新审视它所处的位置，行进的「前端河」分出了两条支流：一条是滚滚洪流，没有人能够逃脱

它的流速，我们必须要在拥抱中重生；一条是波澜不惊，那是我们最初的方向，返璞归真、自诩的「经

典」和不灭的执念。顺应潮流而不背离初心，

layui

注定要同时流向这两条支流，虽千万里之行，亦愿独

闯。

[优化] form 组件的 val() 方法，除了之前版本的赋值，目前还可支持取值 #详见文档

[新增] tree 组件的数据源参数 field，用于定义数据字段名

[优化] tree 组件的节点删除前的提示功能

[修复] tree 组件的数据源参数 checked 在父子节点同时设定时的异常问题

[优化] table 组件的 defaultToolbar 参数，可以扩展头部工具栏右侧图标按钮 #详见文档

[优化] table 组件的局部代码，减少重复的全局事件引发的卡顿问题

[修复] table 组件的合计行未按照对应列显示自定义模板的问题

[修复] table 组件导出数据时未包含合计行的问题

[修复] transfer 组件的右侧面板在使用搜索转移数据后，无法再获取右侧数据的问题

[新增] upload 组件的 progress 回调，用于监听文件的上传进度 #详见文档

v2.5.4

[修复] table 组件 reload 后的各种可能发生的异常问题

[新增] tree 组件的 id 参数，用于定义实例的唯一索引

[新增] tree 组件的 text 参数，用于定义一些默认文本

[新增] tree 组件的数据源参数：spread、checked，以定义节点初始的：选中状态、展开状态

[剔除] tree 组件的 spread、checked 参数，采用数据源中的 spread、checked 属性替代

[剔除] tree 组件的 key 参数，因为多此一举

2019-09-10

2019-06-06

Layui 更新日志

https://www.layui.com/doc/base/changelog.html[10/11/2021 5:32:16 PM]

[优化] tree 组件的 getChecked 方法，让其返回选中的数据，而非节点 DOM

[优化] tree 组件中数据源 label 参数，改名为 title

[优化] tree 组件的 defaultNodeName、emptyText 参数，将其移至到新增的 text 参数中

[修复] transfer、tree 组件在 layui-form 中的样式异常问题

v2.5.2 / v2.5.3

[全面重写] transfer 组件，加强功能，并修复了已知的所有问题 #详见文档

[回滚] table 组件的 reload 方法在 2.5.0 的机制，因大量场景测试存在不可控异常，基于稳定考虑，特此恢复

2.5.0

之前机制

[修复] table 组件已知的若干紧急小问题

[修复] upload 组件 reload 重载时，如果传入 elem 出现报错的问题

v2.5.1

[修复] table 组件，当不开启分页且出现滚动条，底部出现无边框的问题

[修复] table 组件，当 reload 仅重载 data 时的若干小问题

[调整] tree 组件，如果子节点有任意一条选中，则父节点为选中状态

[新增] tree 组件的 defaultNodeName 属性，用于定义节点的默认名称

[优化] tree 组件的 renderContent 属性，改名为 edit，可自由配置“增改删”按钮的显示状态

[优化] tree 组件的 expandClick 属性，改名为 onlyIconControl，用于表示“是否仅允许节点左侧图标控制展开

收缩

”

，默认

false

[优化] tree 组件方法命名：getCheck 改名为 getChecked、setCheck 改名为 setChecked

[优化] tree 组件多处异常样式

[修复] tree 组件的 click 回调的若干问题

[新增] transfer 组件的 width、height 参数，用于设定左右穿梭框的宽高

[修复] transfer 组件在 form 元素下，穿梭框中的按钮触发了提交的 bug

[优化] transfer 组件方法命名：getValue 改名为 getData

v2.5.0

此

“

更

”

时隔半载，其间个中缘由，尽在不言

…

[

新增

] tree

组件

[支持] 无限层级

[支持] 自定义节点数据源：节点名称、勾选状态、禁用状态、拖拽禁止状态、新窗口跳转链接等

[支持] 复选框勾选功能

[支持] 层级连接线功能

[支持] 节点的“增删改”内置操作

[支持] 手风琴展开模式

[支持] 设定默认展开的节点

[提供] 节点被点击、复选框勾选、节点过滤、“增删改”等多种操作场景下的回调

2019-06-04

2019-06-03

2019-05-31

Layui 更新日志

https://www.layui.com/doc/base/changelog.html[10/11/2021 5:32:16 PM]

[提供] 设置指定的节点为勾选状态的方法

[提供] 获取当前勾选的全部节点的方法

[提供] 数据为空的自定义文本提示功能

[新增] transfer 穿梭组件

[支持] 设定左右栏初始化数据

[支持] 列表搜索功能

[支持] 自定义左右栏标题

[提供] 左右穿梭交互时的回调

[提供] 获取选中数据（右侧列表）的方法

[加强] table 组件

[优化] table.reload(id, options, type) 方法，可通过设置 type 为 "data"，只刷新数据部分（无抖

动）（注：2.5.2 已取消）

[优化] 打印功能，可包含“合计行”打印

[修复] 导出表格时，如果内容出现逗号出现数据错位的问题

[修复] 无法导出自定义模版（templet）中的数据，而是导出了原始数据的问题

[优化] 多处核心代码

[加强] form 组件

[新增] 元素属性 lay-reqText=""，可用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本

[优化] form 组件的 val() 方法，以避免 radio 元素无法赋值数值型数字的问题

[修复] form 中绑定了 layDate 组件的元素在验证 date 失败时，点击不弹出 layDate 组件的问题

[完善] upload 组件

[增加] inst.reload(options) 方法，用于重置实例的属性值（比如动态改变 acceptMime 等）。inst 是

upload.render()

返回的实例

[修复] 在回调中无法获取到 this.item 的问题

[完善] 其他

[新增] util 模块的 util.event(attr, obj, eventType) 方法，用于更好地处理事件动作

[修复] 在使用 layui.all.js 的情况下，use 一个依赖了非内置模块的自定义模块出现的回调异常问题

[修复] carousel 轮播组件 interval 属性可能存在的异常问题

欢迎来到

layui 2.4

。本次除了

table

组件较大幅度的加强，还特别添加了业界比较常见的两款新组

件：

colorpicker

（颜色选择器）

和

slider

（滑块）。依然没有看到

tree

？多选框等等你想要的功能性组件？不

必着急，我们推出了 layui 第三方扩展组件平台，它用于收集来自 layui 官方以外的组件，由贡献者自己维

护，以群众之力共同完善

layui

！

2.4.x

剩余261页未读，继续阅读

橙-极纪元JJY.Cheng

粉丝: 5w+
资源: 45

layui开发使用文档：Layui-v2.68 入门指南

Starsat SR-488 SPIDER V2.68接收器更新解读

传感器测量与误差分析

CentOS 6.2 LNMP环境与Redis、SSH详细配置教程

最新layui离线文档layui-v2.68全栈镜像含PDF文档2021-10-12.zip

最新layui离线文档layui-v2.68全栈镜像含PDF文档2021-10-12

最新layui离线文档layui-v2.68(文档+示例).chm

xen-ocaml-devel-4.14.2.68.g74e9307182-1.el7.x86_64.rpm

xen-doc-4.14.2.68.g74e9307182-1.el7.x86_64.rpm

xen-ocaml-4.14.2.68.g74e9307182-1.el7.x86_64.rpm

xen-devel-4.14.2.68.g74e9307182-1.el7.x86_64.rpm

最新资源