Layui学习笔记，一起加油！

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

二、记录 <script> layui.config({ base: ‘/res/js/modules/’ //你存放新模块的目录，注意，不是 layui 的模块目录 }).use(‘index’); //加载入口 </script>

三、Layui css 1.栅格系统，免除了自己写css布局的烦恼。Layui容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。可同时指定四种css，分别在不同设备下生效。列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。总体来时跟css的网格布局差不多，能够快速的进行布置。相比网格布局，灵活性就没这么大了。

容器->行->列，列间距定义在行的级别。

栅格布局规则、响应式规则（不同尺寸的屏幕下如何显示）、响应式公共类（不同大小的屏幕下的布局方式block、none、inline）、列间距、列偏移（1-12）、栅格嵌套（栅格理论上可以无限嵌套）。

1. layui的图标，全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

6.layui的表单依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

<script> //Demo layui.use(‘form’, function(){ var form = layui.form; //监听提交 form.on(‘submit(formDemo)’, function(data){

layer.msg(JSON.stringify(data.field));
return false;

}); }); </script>

2021.9.20，先到这。。。

四、Require.js 加载layui

/*定义layui模块*/
require.config(
    {
        "paths": {
            'layui': ['/static/plugs/layui/layui'],
            'jquery': ['/static/plugs/jquery/jquery.min'],
        },
        shim: {
            "layui": {
                deps: ['jquery'],
                exports: 'layui'
            } //设置模块要暴露的变量
        }
    }
)

/使用模块/

require(["layui"], function (layui) {
    layui.config({dir:  '/static/plugs/layui/'});
    layui.use(['layer', 'form', 'laydate'], function () {
        window.layer = layui.layer, window.form = layui.form, window.laydate = layui.laydate;
        layer.msg("test");
    });

});

结语：在实践中已经融会贯通，正在学习VUE……..