当前位置：首页>热门 > >正文

Layui 2.8 正式发布，本文详细介绍所有新特性当前播报

2023-04-25 10:05:46来源：开源中国

layui2.8已经于今天正式发布了，新增优化了大量特性，这里按照layui更新日志的模块结构，详细为你一一介绍。

(资料图片)

基础

风格调整

新版调整主色调为#16baaa，在原有的墨绿基础上赋予了清新。

更简单的构建

构建代码更简单，除字体外，只有js和css两个文件：

layui-v2.8.0          ├─ css                │  └─ layui.css       ├─ font               │  ├─ iconfont.eot    │  ├─ iconfont.svg    │  ├─ iconfont.ttf    │  ├─ iconfont.woff   │  └─ iconfont.woff2  └─ layui.js

相比原有的目录结构：

layui                         ├─ css                        │  ├─ modules                 │  │  ├─ laydate              │  │  │  └─ default           │  │  │     └─ laydate.css    │  │  ├─ layer                │  │  │  └─ default           │  │  │     ├─ icon-ext.png   │  │  │     ├─ icon.png       │  │  │     ├─ layer.css      │  │  │     ├─ loading-0.gif  │  │  │     ├─ loading-1.gif  │  │  │     └─ loading-2.gif  │  │  └─ code.css             │  └─ layui.css               ├─ font                       │  ├─ iconfont.eot            │  ├─ iconfont.svg            │  ├─ iconfont.ttf            │  ├─ iconfont.woff           │  └─ iconfont.woff2          └─ layui.js

将原先 layer/laydate/code 的 css 统一构建到 layui.css，以尽量减少请求，同时原有的图片资源全部替换为纯CSS实现。

舍弃layedit

新版正式的舍弃掉了内置的富文本编辑器，毕竟富文本编辑器本身就是深不见底的坑，在各个UI库或框架中也没有内置，算是抛掉了历史包袱。如果有需要可以自行选择其他优秀的编辑器：

tinymce ckeditor simditor wangeditor quill

新增18个字体图标

布局支持超大屏幕

新增了xl的超大屏幕自适应标记。

其他优化

其中还优化了lay.options 和layui.event方法的表现。

Layer

动画设置

通过anim参数实现四个弹出方向的动画类，可实现边缘抽屉弹出，同时关闭时自动匹配对应的动画。

WIN10风格弹框

新增了一个win10风格的确认框，当你给客户打包成客户端时，或许能要到更多的预算？

回调增加参数

新增 success 等回调的第三个参数：即当前弹层实例对象，以便操作内部方法。

layer.open({  type: 1,  content: "内容",  success: function(layero, index, that){    // 弹层的最外层元素的 jQuery 对象    console.log(layero);    // 弹层的索引值    console.log(index);    // 弹层内部原型链中的 this --- 2.8+    console.log(that);  }});

photos弹框增加底栏

新增 photos 层的私有属性 hideFooter，用于控制是否隐藏图片底部栏。

新增 photos 层底部栏的「查看原图」功能。

新增 photos 层对 lay-src 属性的支持。

其他

弹框输入框支持自定义placeholder 增加了layer.closeLast关闭最近打开的弹框优化了底层相关事件的处理修复了若干问题

table

表格组件进行了大量的特性更新，这里不再摘抄，有需要可以自行查看。表格组件更加完善健壮。

树形table组件

本次更新增加了树形表格组件，以后不需要找插件了。

form

优化了select样式，同时对于搜索选择，优化了删除关键字的表现。

单选框和复选框支持html的标题

其他

优化了单选和多选的更多表现，具体可以查看日志，这里不再摘录。

日期组件

日期选择组件也得到的加强，增加了许多特性。

日期快捷栏

新增 shortcuts 属性，用于开启面板左侧的快捷选择功能。

全面板模式

将日期和时间同时显示，而不需要单独点开设置。

内置多主题

范围选择的input联动

注意，下面截图中，实际上有两个input标签。

其他

日期组件还进行了大量操作的更新，这里不再记录。

下拉菜单

下拉菜单组件也得到了强化，比如重载数据、阴影面板等，同时也增加了很多效果。

在表格中使用

自定义触发事件

右键菜单出发

也支持全部页面绑定右键事件。

自定义菜单内容

底层方法

2.8增加了几个常用的底层方法，会给开发带来极大的便利。

链接解析

解析url为一个数组。

/ 假设当前页面 url 为： https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/var url = layui.url();// url 返回结果为：{  "pathname": ["docs","base.html"], // 路径  "search": {"a":"1","c":"3"}, // 参数  "hash": { // hash 解析    "path": ["user","set",""], // hash 中的路径    "search": {"id":"123"}, // hash 中的参数    "hash": "",  // hash 中的 hash    "href": "/user/set/id=123/"  // hash 中的完整链接  }}

本地存储

如今越来越多的前端都会用到浏览器localstorage，但是又希望通过一个封装库去操作，以取得更好地浏览器兼容性。其实

本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。方法如下：

layui.data(table, settings);即 localStorage，数据在浏览器中的持久化存储，除非物理删除。 layui.sessionData(table, settings);即 sessionStorage ，数据在浏览器中的会话性存储，页面关闭后即失效。

两者使用方式完全一致。其中参数 table为表名，settings是一个对象，用于设置 key/value。下面以 layui.data()方法为例：

// 【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。layui.data("test", {  key: "nickname",  value: "张三"});// 【删】：删除 test 表的 nickname 字段layui.data("test", {  key: "nickname",  remove: true});layui.data("test", null); // 删除 test 表// 【改】：同【增】，会覆盖已经存储的数据// 【查】：向 test 表读取全部的数据var localTest = layui.data("test");console.log(localTest.nickname); // 获得“张三”

浏览器信息

var device = layui.device(key);

参数 key 可选。可利用该方法对不同的设备进行差异化处理，device 即为不同设备下返回的不同信息，如下

{  os: "windows", // 当前浏览器所在的底层操作系统，如：Windows、Linux、Mac 等  ie: false, // 当前浏览器是否为 ie6-11 的版本，如果不是 ie 浏览器，则为 false  weixin: false, // 当前浏览器是否为微信 App 环境  android: false, // 当前浏览器是否为安卓系统环境  ios: false, // 当前浏览器是否为 IOS 系统环境  mobile: false // 当前浏览器是否为移动设备环境（v2.5.7 新增）}

layui.link(href)

加载 CSS，href 即为 css 路径。一般用于动态加载你的外部 CSS 文件

layui.getStyle(node, name)

获得一个原始 DOM 节点的 style 属性值，如： layui.getStyle(document.body, "font-size")

layui.each(obj, callback)

对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句

layui.sort(obj, key, desc)

将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], "a"); // 返回：[{"a":1},{"a":3},{"a":5}]

其他

除了上面介绍的，2.8还有更多的新增的特性和优化。比如：增强了颜色选择器的操作，增强了轮播的操作，增强了代码预览，增强了utils类和更多细节的方法。

升级兼容性

2.8的版本对老版本兼容非常好，如果你的layui是2.7.6，那么基本上可以做到无缝升级。我自己有一个开源的后台框架ulthon_admin，现在已经升级到2.8.0了，可以具体参考一下升级的文件变化，基本上只要把主体的js和css换掉就可以了。

其次如果你有定制的layer的样式，那么要注意修改，layer弹框的右上角操作图标已经不再是图片，而是纯css实现，可能你需要注意一下。

除此之外，layui2.8对老版本的兼容性非常好，赶快升级到2.8吧，享受ayui更多的特性。

最后

祝layui越做越好。layui基本上已经成为“传统前端”最流行的ui库了，而现在layui自从将社区迁移到gitee之后，过滤掉了大量“无知”的开发者，更多的“认真”的开发者都沉淀下来，将来也会越发展越好。

原文标题：Layui2.8正式发布，本文详细介绍所有新特性
原文地址：https://phpreturn.com/index/a6446527cab7e0.html
原文平台：PHP武器库
版权声明：本文由phpreturn.com（PHP武器库官网）原创和首发，所有权利归phpreturn（PHP武器库）所有，本站允许任何形式的转载/引用文章，但必须同时注明出处。

标签：