基本使用
引用
- 官网下载layui.js文件，通过script标签引用
- 通过第三方CDN引入
使用类名，实现页面效果
layui遵循原生态的 HTML/CSS/JavaScript 开发模式,我们只需通过添加相应的类名就可以实现我们想要的页面样式
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">验证必填项</label>
<div class="layui-input-block">
<input type="text" placeholder="请输入"autocomplete="off" class="layui-input"/>
</div>
</div>
</form>
渲染效果
引入模块实现功能逻辑
layui.use(function(){
const form = layui.form
form.on(events,callback)
})
事件绑定
模块组件内绑定
- 为元素添加lay-filter属性
- 注册事件，如form.on('event(filter)',callback) 不同组件有不同的event,例如form有submit,checkbox,select,switch,radio等
普通标签绑定
- 为元素添加lay-on属性
- 注册事件使用工具模块util.on(attr,events,options)
attr,触发事件的元素属性名，默认是lay-on
events,事件集合，键是attr对应的属性值 值是fucntion
options,包含elem(触发事件的委托元素)和trigger(事件触发方式，默认是click)
模块系统
定义模块
/**
*参数：
* mods:自定义模块依赖的模块，参数可选
* callback:模块加载完的回调函数，自定义模块的内容
* 定义模块时的 `callback` 将会在初次加载该模块时被自动执行
*/
layui.define([mods]:string[], function(exports){
exports('模块名',{})
})
定义模块时的callback方法的 exports 参数中是一个函数，它接受两个参数：参数一为模块名，参数二为模块接口 callback在加载时自动调用，当我们需要再次调用这个模块的callback时，可通过layui.factory(mod)获取该模块的callback
扩展模块
除了layui内置的模块，在项目实际开发中，我们需要引入第三方模块
/**
*参数 `mods` 若填写，必须是已被成功定义的模块名；
*若 mods 不填，即只传一个 callback 参数时，则表示引用所有内置模块。
* 参数 `callback` 即为使用模块成功后回调函数。
* 该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作
**/
layui.extend({
myModule:'文件地址'
})
使用模块
layui.use([mods],callback)
模板语法
模板解析与渲染
layui.use(function(){
laytpl(str, options).render(data, callback);
//解析与渲染也可以分开,模板通用，数据不同时，这样做可以减少模板解析的开销
const compiler = laytpl(str,options)
compiler.render(data,callback)
})
模板语法
| 标签 | 描述 |
|---|---|
| {{= }} | 直接渲染，带有HTML标签,也会渲染成字符串 |
| {{- }} | 渲染带有HTML的标签 |
| {{# }} | 渲染javascript语句，逻辑语句 |
| {{! !}} | 模板区域进行过滤，即不解析该区域的模板 |
