2025年layUI使用方法

layUI使用方法一 1 layui 模块化使用 如果你使用的是 layui 那么你直接在官网下载 layui 框架即可 无需引入 Query 和 layer js 但需要引入 layui css 和 layui js 调用方式 通过 layui use layer callback 加载和初始化 layer 模块 2 作为独立组件使用

大家好,我是讯享网,很高兴认识大家。

一.1.layui模块化使用:如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入Query和layer.js,但需要引入layui.css和layui.js。
调用方式:通过layui.use(‘layer’,callback)加载和初始化layer模块。
在这里插入图片描述
讯享网
2.作为独立组件使用,如果你只是想使用的是layer,你可以去layer独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。
调用方式:通过script标签引入layer后,直接用即可。
在这里插入图片描述
二.Layer简单的弹出模态窗体,title支持三种的值,若你传入的是普通的字符串,如title:’我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以tilte:[‘文本’,’font-size:18px;’],数组第二项可以写任意css样式;如果那你不想显示标题栏,你可以title:false。Centent内容,content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着。
type的不同而不同。例如:
在这里插入图片描述layer弹出模态框,关闭模态框
在这里插入图片描述
在这里插入图片描述
表格方法的渲染配置:cols 标题栏
在这里插入图片描述三.tempelt自定义列模板 类型:string,默认值:无
在默认情况下,单元格的内容是完全按照数据接口返回的conetn原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。
Templet 提供了三种使用方式,请结合实际场景选择最合适的一种:
1.如果自定义模版的字符量太大,我们推荐你采用【方式一】
2.如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】
3.如果自定义模板的字符量很小,我们推荐你采用【方式三】
在这里插入图片描述四.事件监听
语法:table.on(‘event(filter)’,
callback); 注:event为内置事件名,filter为容器lay-filter设定的值
table模块在Layui事件机制中注册了专属事件,如果你使用layui.onevent()自定义模块事件,请勿占用table名。目前所支持的所有事件见下文。
默认情况下,事件所监听的是全部的table模块容器,但如果你只想监听某一个容器,使用事件过滤器即可。
假设原始容器为:

小讯
上一篇 2025-03-10 20:53
下一篇 2025-03-13 16:31

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/19897.html