Layui基础

创始人

2024-02-06 08:42:14

0次

认识 Layui

一、介绍

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
官网：https://www.layui.com

二、下载安装

三、模块

layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

1、模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zn1wUfaQ-1669037555174)(assets/01.jpg)]

2、加载模块

layui 通过 use 方法加载模块

3、Jquery

layui 部分模块依赖 jQuer，但是不用去额外加载 jQuery，layui 已经将 jQuery 最稳定的一个版本改为 layui 的内部模块

表单按钮

一、按钮

1、写法


一个可跳转的按钮

2、颜色

3、镂空

4、尺寸

5、圆角

6、按钮组

二、表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的 HTML 结构及 CSS 类，来组装成各式各样的表单元素，并通过内置的 form 模块来完成各种交互。
依赖加载模块：form （如果不加载 form 模块，select、checkbox、radio 等将无法显示，并且无法使用 form 相关功能）

1、输入框

2、下拉选择框
默认选中

自定义：选中、禁用

分组

3、单选框

4、多选框
默认风格

原始风格

5、开关

6、文本框

7、区块结构

class="layui-form-item" class="layui-form-label" class="layui-input-block"
class="layui-input-inline"
输入框
输入框
选择框
单选框
多选框
富文本

8、表单方框
class=“layui-form-pane” 设定表单的方框风格
class=“layui-form-text”
pane 复选框/开关/单选框，需要额外添加属性

输入框
输入框
选择框
单选框
多选框
富文本

表单模块

一、预设元素属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjqRAwzf-1669037555175)(assets/02.png)]

1、title

单选框

多选框

2、lay-skin

多选框

3、lay-ignore

选择框

单选框

多选框

二、事件触发

语法：form.on(‘event(过滤器值)’, callback);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ceemuk2t-1669037555176)(assets/03.png)]

1、select 触发下拉选择事件
elem 得到 select 原始 DOM 对象
value 得到被选中的值
othis 得到美化后的 DOM 对象

选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gGVyAJHQ-1669037555176)(assets/04.png)]

lay-filter=“” 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的

选择框

2、checkbox 触发复选框勾选事件
elem 得到 checkbox 原始 DOM 对象
elem.checked 是否被选中，true 或者 false
value 复选框 value 值，也可以通过 elem.value 得到
othis 得到美化后的 DOM 对象

多选框

3、switch 触发复选框开关事件
elem 得到 checkbox 原始 DOM 对象
elem.checked 开关是否被选中，true 或者 false
value 复选框 value 值，也可以通过 elem.value 得到
othis 得到美化后的 DOM 对象

开关

4、radio 触发单选框事件
elem 得到 radio 原始 DOM 对象
value 被点击的 radio 的 value 值



单选框

5、submit 触发表单提交事件
elem 被执行事件的元素 DOM 对象，一般为 button 对象
form 被执行提交的 form 对象，一般在存在 form 标签时才会返回
field 当前容器的全部表单字段，名值对形式：{name: value}

lay-submit 绑定触发提交的元素

三、表单验证

lay-verify 表单验证，支持多条规则的验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlJ5DcQ4-1669037555177)(assets/05.png)]

lay-reqText 自定义必填项的提示文本

多个验证:必填项\手机

lay-verType 提示层模式：tips（吸附层）、alert（对话框）、msg（默认）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2AFhfEPC-1669037555178)(assets/06.png)]

四、更新渲染

Layui 没有双向绑定机制，但是我们需要动态修改

省市

render() 方法，更新渲染

参数 1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7H28d6Gw-1669037555179)(assets/07.png)]

弹出层模块

一、弹出层

1、alert 普通弹框

layer.alert(content, options, yes)

三个参数：内容，置配(图标)，返回函数

2、confirm 询问框

layer.confirm(content, options, yes, cancel)
四个参数：内容，置配(图标)，点击确定时的回调函数，点击取消时的回调函数

layer.confirm('你是欧阳克吗?', { icon: 3, title: '疑问' }, function (index) {console.log(index)layer.close(index)
})

3、msg 提示框

layer.msg(content, options, end)

三个参数：内容，置配(图标)，结束函数

layer.msg('我是欧阳克')
layer.msg('我是欧阳克', { icon: 6 })
layer.msg('我是欧阳克', function () {console.log('欧阳克')
})

4、load 加载层

layer.load(icon, options)
icon 支持传入 0-2


layer.load();
layer.load(1);
layer.load(2, { time: 2 \* 1000 });

5、tips 吸附层

layer.tips(content, follow, options)

三个参数：内容，吸符在那个标签上，置配(图标)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RBkFIBIq-1669037555179)(assets/11.png)]


这里显示tip提示框

6、open 核心方法

layer.open(options) 不管是使用哪种方式创建层，都是走 open()

layer.open({title: '标题',content: '我是欧阳克',
})

二、基础参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9tnDps3-1669037555180)(assets/08.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dca5hUT-1669037555180)(assets/09.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UgaBEFvu-1669037555181)(assets/10.png)]

1、信息框

2、页面层

layer.open({type: 1,title: '标题',content:'输入框',
})

3、iframe 层

layer.open({type: 2,title: '欧阳克',content: 'http://www.ouyangke.cn',
})

4、加载层

layer.open({type: 3,
})

5、tips 层

这里显示tip提示框

;

三、其他方法

1、关闭指定层

layer.close(index)
var index = layer.alert('灭绝师太')
layer.close(index)layer.open({type: 0,title: '标题',content: '我是欧阳克',yes(index, layero) {console.log('点击确定按钮')layer.close(index)},
})

2、最大化

layer.full()
var index = layer.alert('灭绝师太')
layer.full(index)layer.full(layer.open({type: 2,title: '欧阳克',maxmin: true,content: 'http://www.ouyangke.cn',})
)

备：其他方法

layer.closeAll() 关闭所有层
layer.min() 最小化
layer.restore() 恢复弹窗
layer.style() 重新定义层的样式
layer.title() 改变层的标题
layer.iframeAuto() 指定 iframe 层自适应
layer.iframeSrc() 重置特定 iframe url
layer.setTop() 置顶当前窗口
layer.getChildFrame() 获取 iframe 页的 DOM
layer.getFrameIndex() 获取特定 iframe 层的索引

四、其他层

1、输入层

layer.prompt(options, yes)
layer.prompt({formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）value: '我是欧阳克',title: '请输入老师介绍',area: ['800px', '350px'],},function (value, index, elem) {console.log(value)layer.close(index)}
)

2、tab 层

layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1',content: '灭绝师太',},{title: 'TAB2',content: '西门大官人',},{title: 'TAB3',content: '欧阳克',},],
})

3、

layer.photos({photos: {title: '', //相册标题id: 123, //相册idstart: 1, //初始显示的图片序号，默认0data: [//相册包含的图片，数组格式{alt: '图片1',pid: 1, //图片idsrc: 'https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg', //原图地址thumb: 'https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg', //缩略图地址},{alt: '图片2',pid: 2, //图片idsrc: 'https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg', //原图地址thumb: 'https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg', //缩略图地址},{alt: '图片3',pid: 3, //图片idsrc: 'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg', //原图地址thumb: 'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg', //缩略图地址},],},anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
})

表格

一、页面元素

1、常规用法

class=“layui-table”

ID 姓名 技能
1 灭绝师太 HTML、CSS、PHP
2 西门大官人 PHP、ThinkPHP、Laravel
3 天蓬 HTML、CSS、JavaScript
4 欧阳克 PHP、ThinkPHP、小程序

ID	姓名	技能
1	灭绝师太	HTML、CSS、PHP
2	西门大官人	PHP、ThinkPHP、Laravel
3	天蓬	HTML、CSS、JavaScript
4	欧阳克	PHP、ThinkPHP、小程序

2、其他风格

行边框风格

列边框风格

无边框风格

3、尺寸

小尺寸

大尺寸

4、隔行背景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Us5gGttl-1669037555187)(assets/12.png)]

二、表格渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zr9j5XFF-1669037555188)(assets/13.png)]

1、方法渲染

2、基础参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2phYqLwF-1669037555189)(assets/14.png)]

三、表头参数

cols 设置表头。值是一个二维数组。方法渲染方式必填

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3jwulZt-1669037555190)(assets/15.png)]

四、异步数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0mgFcgg-1669037555191)(assets/16.png)]

1、url 接口

2、接口返回数据的格式

{"code": 0,"msg": "","count": 1000,"data": [{},{}]
}

3、where 传参数

4、回调方法

table.render({elem: '#demo',url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',where: {id: 0,status: 1,},cols: [[{ type: 'checkbox', LAY_CHECKED: true },{ type: 'radio' },{ type: 'numbers' },{ type: 'space', title: '空列', width: 120 },{ field: 'area_id', title: 'ID', width: 120, fixed: 'left' },{ field: 'area_name', title: '城市名', unresize: true },{ field: 'area_ip_desc', title: '归属', align: 'right' },{ field: 'first_pinyin', title: '拼音', hide: true },{ field: 'pinyin', title: '首字母', minWidth: 500, sort: true },{field: 'status',title: '状态',fixed: 'right',style: 'color:red;',},],],done(e) {console.log(e)},
})

5、开启分页

page: true

table.render({elem: '#demo',url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',where: {id: 0,status: 1,},cols: [[{ type: 'checkbox', LAY_CHECKED: true },{ type: 'radio' },{ type: 'numbers' },{ type: 'space', title: '空列', width: 120 },{ field: 'area_id', title: 'ID', width: 120, fixed: 'left' },{ field: 'area_name', title: '城市名', unresize: true },{ field: 'area_ip_desc', title: '归属', align: 'right' },{ field: 'first_pinyin', title: '拼音', hide: true },{ field: 'pinyin', title: '首字母', minWidth: 500, sort: true },{field: 'status',title: '状态',fixed: 'right',style: 'color:red;',},],],done(e) {console.log(e)},page: true,
})

五、数据操作

1、绑定按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMKDwynL-1669037555192)(assets/17.png)]

toolbar: #toolbarDemo 指向自定义工具栏模板选择器
toolbar: "<“div”>“xxx”"直接传入工具栏模板字符
toolbar: true 仅开启工具栏，不显示左侧模板
toolbar: default 让工具栏左侧显示默认的内置模板

defaultToolbar：filter 显示筛选图标，exports 显示导出图标，print 显示打印图标

table.render({toolbar: '#toolbar',defaultToolbar: ['filter', 'print', 'exports'],
})

2、工具条事件

语法：table.on(‘event(filter)’, callback);

event 为内置事件名 filter 为容器

lay-filter 设定的值

3、checkbox 复选框事件

checked 当前是否选中状态

data 选中行的相关数据

type 如果触发的是全选，则为：all，如果触发的是单选，则为：one

4、radio 单选框事件