Layui 2.8.1 最新正式发布,本文详细介绍所有新特性
基础
风格调整
新版调整主色调为#16baaa
,在原有的墨绿基础上赋予了清新。
更简单的构建
构建代码更简单,除字体外,只有
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
将原先
舍弃layedit
新版正式的舍弃掉了内置的富文本编辑器,毕竟富文本编辑器本身就是深不见底的坑,在各个
tinymce
ckeditor
simditor
wangeditor
quill
新增18 个字体图标
布局支持超大屏幕
新增了
其他优化
其中还优化了lay.options
和layui.event
方法的表现。
Layer
动画设置
通过anim
参数实现四个弹出方向的动画类,可实现边缘抽屉弹出,同时关闭时自动匹配对应的动画。
WIN10 风格弹框
新增了一个
回调增加参数
新增
layer.open({ type: 1, content: '内容', success: function(layero, index, that){ // 弹层的最外层元素的 jQuery 对象 console.log(layero); // 弹层的索引值 console.log(index); // 弹层内部原型链中的 this --- 2.8+ console.log(that); }});
photos 弹框增加底栏
新增
新增
新增
其他
弹框输入框支持自定义
placeholder 增加了
layer.closeLast 关闭最近打开的弹框
优化了底层相关事件的处理
修复了若干问题
table
表格组件进行了大量的特性更新,这里不再摘抄,有需要可以自行查看。表格组件更加完善健壮。
树形table 组件
本次更新增加了树形表格组件,以后不需要找插件了。
form
优化了select 样式,同时对于搜索选择,优化了删除关键字的表现。
单选框和复选框支持html 的标题
其他
优化了单选和多选的更多表现,具体可以查看日志,这里不再摘录。
日期组件
日期选择组件也得到的加强,增加了许多特性。
日期快捷栏
新增 shortcuts
属性,用于开启面板左侧的快捷选择功能 。
全面板模式
将日期和时间同时显示,而不需要单独点开设置。
内置多主题
范围选择的input 联动
注意,下面截图中,实际上有两个
更多效果
增加了国际模式,还增加了公历节日、国际节日等标注,同时支持自定义标注日期。
其他
日期组件还进行了大量操作的更新,这里不再记录。
下拉菜单
下拉菜单组件也得到了强化,比如重载数据、阴影面板等, 同时也增加了很多效果。
在表格中使用
自定义触发事件
右键菜单出发
也支持全部页面绑定右键事件。
自定义菜单内容
导航
新增浅色主体导航。
底层方法
链接解析
解析
/ 假设当前页面 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 中的完整链接 }}
本地存储
如今越来越多的前端都会用到浏览器
本地存储是对
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);
参数
{ 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)
加载
layui.getStyle(node, name)
获得一个原始layui.getStyle(document.body, 'font-size')
layui.each(obj, callback)
对象(Array、Object、
layui.sort(obj, key, desc)
将数组中的对象按某个成员重新对该数组排序,如:
其他
除了上面介绍的,
升级兼容性
https://gitee.com/ulthon/ulthon_admin/commit/1aadf727aee77d0eec46f31cb479ce0b6929c00b
其次如果你有定制的
另一个要注意的就是
除此之外,
最后
祝