【前端】layui 笔记

myaijarvis

已于 2022-04-26 21:27:03 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： html css

于 2021-06-08 22:06:44 首次发布

本文链接：https://blog.csdn.net/Jruo911/article/details/117717218

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

总结好的教程：http://www.shagua.wiki/project/3?p=112 （非常不错）

排错

样式不符合预期时，去官网重新下载然后粘贴进去

layui 上传组件连续上传同一个文件upload组件无反应
https://blog.csdn.net/weixin_40425415/article/details/117534788

var uploadcom = upload.render({
        elem: '#upBmc', //绑定元素
        url: '/upload/image', //上传接口
        auto: false, //选择文件后不自动上传
        accept: 'file', //允许上传所有文件类型
        // bindAction: '#upgradeBmc', //指向一个按钮触发上传
        choose: obj => {
          // 清空历史上传文件，解决choose只执行一次的问题！！！
           uploadcom.config.elem.next()[0].value = ''; 
        }
   })

表单

好文档：http://www.shagua.wiki/project/3?p=91

用表单元素是必须要放在form表单或者div中而且要带上class属性class=“layui-form”

【参考：layui表单提交禁止表单跳转也会自动刷新_gis_KG的博客-CSDN博客】

再登录按钮上加一个 type=“button” 已经多次遇到这个问题了

				<div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                            lay-filter="login" type="button">登 入
                    </button>
                </div>

校验

来源：http://www.shagua.wiki/project/3?p=121

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>傻瓜教程</title>
        <!-- layui css -->
        <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
        <!-- layui js -->
        <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    </head>
    <body>
        <div style="padding: 10px;">
            <style type="text/css">
             /* 必填项签名添加* */
             .layui-required:after {
                content: "*";
                color: red;
                position: absolute;
                top: 10px;
                right: 5px;
             }
            </style>
            <!-- 傻瓜教程layui项目常用代码整理:http://www.shagua.wiki/project/3?p=121 -->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-required">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="required|username"  placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" lay-verify="phone" lay-reqtext="大神,请留下你的手机号!!!" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="repeat_password" lay-verify="repeat" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">请再次输入密码</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">单选框</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" lay-verify="otherReq" value="男" title="男" >
                        <input type="radio" name="sex" lay-verify="otherReq" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">复选框</label>
                    <div class="layui-input-block" id='interst'>
                        <input type="checkbox" name="like[write]" lay-verify="required|otherReq_ck" title="写作">
                        <input type="checkbox" name="like[read]"  lay-verify="otherReq_ck" title="阅读" >
                        <input type="checkbox" name="like[game]"  lay-verify="otherReq_ck" title="游戏">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-required">搜索选择框</label>
                        <div class="layui-input-inline">
                            <select name="modules" lay-verify="required" lay-search="">
                                <option value="">直接选择或搜索选择</option>
                                <option value="1">layer</option>
                                <option value="2">form</option>
                                <option value="3">layim</option>
                                <option value="4">element</option>
                                <option value="5">laytpl</option>
                                <option value="6">upload</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">日期时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="date2" placeholder="yyyy-MM-dd HH:mm:ss">

                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">范围</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开关-默认关</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">开关-默认开</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">滑块</label>
                    <div class="layui-input-block" style="padding-top: 15px;">
                        <div id="slideTest5"></div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">普通文本域</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item  layui-form-text">
                     <div style="padding-left:20px;display: flex;">
                         <input type="checkbox"  name="protocol"  value="0" id="key_service" lay-skin="primary"  lay-verify="checkservice" >
                         <div id="" style="margin-top: 10px;">
                             <a href="#">
                                 <b>《服务条款》</b>
                             </a>
                            <span>及</span>
                             <a hrefe="#">
                                 <b>《隐私声明》</b>
                             </a>
                         </div>
                     </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">ajax提交表单</button>
                        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2">原始表单提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript">
            //我们引用的是layui.js而非layui.all.js,采用模块开发方式,所以需要用layui.use
            layui.use(['layer', 'form', 'laydate','slider'], function() {
                var form = layui.form;
                var laydate = layui.laydate;
                var slider = layui.slider;
                var sliderValue = 0;
                //默认滑块
                slider.render({
                  elem: '#slideTest5'
                  ,step: 10 //步长
                  ,showstep: true //开启间隔点
                  ,change: function(value){
                      //取值;
                      sliderValue = value;
                      console.log(value) 
                      //do something
                    }
                });
                //日期时间选择器 更多参数=>http://www.shagua.wiki/project/3?p=97
                laydate.render({
                    elem: '#date',
                    // format: 'yyyy-MM-dd'
                });
                //日期时间选择器 更多参数=>http://www.shagua.wiki/project/3?p=97
                laydate.render({
                    elem: '#date2',
                    type: 'datetime',
                    // ,format: 'yyyy年MM月dd日'
                });
                //表单验证,重写phone,email,url,number,date,identity等规则
                //是因为,layui验证有个问题
                //就当你使用这些规则的时候,他就要求该表单项必填,
                //无法达到,用户填写就验证,不填就不验证的效果
                form.verify({
                    phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
                    email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
                    url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
                    number: [/(^$)|^\d+$/,'只能填写数字'],
                    date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
                    identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"],
                    password: [
                      /^[\S]{6,12}$/
                      ,'密码必须6到12位，且不能出现空格'
                    ],
                    username: function(value, item){ //value：表单的值、item：表单的DOM对象
                            if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                              return '用户名不能有特殊字符';
                            }
                            if(/(^\_)|(\__)|(\_+$)/.test(value)){
                              return '用户名首尾不能出现下划线\'_\'';
                            }
                            if(/^\d+$/.test(value)){
                              return '用户名不能全为数字';
                            }
                    },
                    repeat:function(value,item){
                        if(value!=layui.$("input[name='password']").val()){
                            return "两次输入的密码不一致"
                        }
                    },
                    checkservice:function () {
                        var checked=document.getElementById("key_service");
                        if(checked.checked==false){
                            layer.msg("请勾选协议",{icon:5,time:2000,anim: 6})
                            return "请勾选协议";
                        }
                    },
                    //傻瓜教程layui项目常用代码整理:http://www.shagua.wiki/project/3?p=121
                    //单选框,任选一项 
                    otherReq: function(value, item) {
                                var $ = layui.$;
                                var verifyName = $(item).attr('name'),
                                    verifyType = $(item).attr('type'),
                                    formElem = $(item).parents('.layui-form') //获取当前所在的form元素，如果存在的话
                                    ,
                                    verifyElem = formElem.find('input[name=' + verifyName + ']') //获取需要校验的元素
                                    ,
                                    isTrue = verifyElem.is(':checked') //是否命中校验
                                    ,
                                    focusElem = verifyElem.next().find('i.layui-icon'); //焦点元素
                                if (!isTrue || !value) {
                                    //定位焦点
                                    focusElem.css(verifyType == 'radio' ? {
                                        "color": "#FF5722"
                                    } : {
                                        "border-color": "#FF5722"
                                    });
                                    //对非输入框设置焦点
                                    focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function() {
                                        focusElem.css(verifyType == 'radio' ? {
                                            "color": ""
                                        } : {
                                            "border-color": ""
                                        });
                                    }).focus();
                                    return '傻瓜教程提示:请任选一项';
                                }
                    },
                    //傻瓜教程layui项目常用代码整理:http://www.shagua.wiki/project/3?p=121
                    //复选框,任选一项或多项 自行修改
                    //要求 每个复选框元素要互为兄弟元素
                    otherReq_ck: function(value, item) {
                             var $ = layui.$;
                             //查找父元素
                             var parent = $(item).parent()
                             //获取勾选的个数
                             var len = parent.find("input:checked").length;
                             //限定格式,可自定义修改
                             if(len<2){
                                 var focusElem = parent.find(".layui-unselect.layui-form-checkbox");
                                 //定位焦点
                                 focusElem.css({
                                     "border": "solid 1px rgb(255, 87, 34)",
                                     "box-sizing":"content-box"
                                 });
                                 //对非输入框设置焦点
                                 focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function() {
                                     focusElem.css({
                                         "border": "",
                                         "box-sizing":"border-box"
                                     });
                                 }).focus();
                                 return '傻瓜教程提示:兴趣爱好,需任选两项';
                             }
                    }
                });
                //监听指定开关
              form.on('switch(switchTest)', function(data){
                layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                  offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
              });

                //当你需要使用ajax提交表单时,可监听表单提交
                //立即提交按钮要设置lay-submit属性,才能被监听 
                //submit(demo1) 表示只监听 含有lay-filter="demo1" 的按钮
                //只监听提交,demo1 ,没有监听demo2(自然而然就是原始表单提交)
                //原始表单提交,会刷新页面,体验较差
                傻瓜教程layui项目常用代码整理:http://www.shagua.wiki/project/3?p=121
                form.on('submit(demo1)', function(data) {
                    //data.field 是一个json对象,批量获取表单的值{'表单的name':'对应的值'}
                    data.field.slidervalue = sliderValue;//拼接slider的值
                    layer.msg(JSON.stringify(data.field));
                    /**
                     //常用的post方法
                    var $ = layui.$;
                    $.post("接口地址",data.field,function(data,status){
                        console.log(data);
                        layer.closeAll();
                    });
                    */
                    //return false 可以阻止 表单提交(刷新页面)
                    return false;
                });
                laydate.render();
            })
        </script>
    </body>
</html>

效果
在这里插入图片描述

按钮禁用与恢复

禁用按钮状态： disabled=true
$('#sendSmsBtn').addClass("layui-btn-disabled").attr("disabled",true);

恢复按钮状态：
$('#sendSmsBtn').removeClass("layui-btn-disabled").attr("disabled",false);


按钮变成灰色按钮仍然可以点击
$('#sendSmsBtn').addClass("layui-btn-disabled");

手动触发

$(`input[name=downloadType][value=${data.parentDid}]`).trigger("click");
form.render('radio')

控件选中

1.控件选中
2.表单重新渲染


layui.use(['jquery', 'form'], function () {
    var $ = layui.$
        , form = layui.form;

    $(function () {
            $('#remember').attr("checked", true)
            // 重新渲染表单，否则无法呈现效果
            form.render("checkbox");
        }
    })
})

// 批量
$('input[type=checkbox]:checked').each(function () {
    $(this).prop("checked", true);
});

checkbox

参数：value 自定义值，否则默认选中返回"on"

获取checkbox值
https://www.cnblogs.com/sirdong/p/11579485.html

<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="CSDN" lay-filter="like" title="复选框一" value="dongsir">
            <input type="checkbox" name="CSDN" lay-filter="like" title="复选框二" value="董先生">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="test">立即提交</button>
        </div>
    </div>
</form>

layui.use('form', function(){
    var form = layui.form,
        $ = layui.$;
    //各种基于事件的操作。

	// 表单提交
    form.on('submit(test)', function(data){
        //将页面全部复选框选中的值拼接到一个数组中
        var arr_box = [];
        $('input[name=CSDN]:checked').each(function() {
            arr_box.push($(this).val());
        });
        //数组
        console.log(arr_box);
        // ["董先生的CSDN"]
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

});


或者
form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});

组装行内表单

官方：https://www.layui.com/doc/element/form.html#inline

1.输入框+按钮

在这里插入图片描述

<form class="layui-form">

    <div class="layui-form-item">
    
        <label class="layui-form-label">兑换码</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="cdk" required lay-verify="required"
                   autocomplete="off" maxlength="10"
                   placeholder="请输入10位兑换码" class="layui-input">
        </div>
        
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-normal" lay-submit
                    lay-filter="formExchange">兑换
            </button>
        </div>
        
    </div>
</form>

2.多个输入框

<form class="layui-form">
    
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="account" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="password" name="password" autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>
    
</form>

技巧

行内显示

class=“layui-inline”：定义外层行内
class=“layui-input-inline”：定义内层行内

layui-input-block 一个表单元素占一行（默认有margin-left: 110px;）

layui-inline 用于将标签设为内联块状元素 （父）
layui-input-inline 可以放置多个表单元素（子），且可以设置其内部元素的宽度，并使在同一个父级为layui-inline的所有子元素都水平对齐

技巧：在表单控件外套一个div，然后控制div的宽度就可以实现控制表单控件的宽度

<div class="layui-inline">
	<div class="layui-input-inline" style="width: 100px;">
	<!-- 在input内加style="width: 100px;"无效 -->
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <!-- 
    如果子元素不用设置固定宽度等其他参数，也可以直接写
     <button class="layui-btn layui-btn-primary">搜索</button>
     -->
    <div class="layui-input-inline" style="width: 100px;">
       <button class="layui-btn layui-btn-primary">搜索</button>
    </div>
</div>

layer.msg

layer.msg参数含义及参数icon数字参数说明
https://blog.csdn.net/qq_36850813/article/details/89711784

layer.msg('xxx', {icon: 5,time:3000});

// anim: 6 抖动
layer.msg('xxx', {icon: 5,time:3000,anim: 6});

layui.use中自定义function

https://blog.csdn.net/qq_40147863/article/details/88562863

适用于：

obj.click()
行内 onclick
javascript:函数名()

window.hello = function(obj) {}

		    layui.use(["jquery","layer","form"],function(){
				var $ = layui.$,layer = layui.layer,form = layui.form;
				$("#test").click(function(){
					hello("张三");
				});
				window.hello = function(obj) {
					layer.msg("hello world,"+obj);
				}
			});

栅格

前言：layui与bootrap在栅格系统方面有一定的区别，甚至是截然相反。

显示与隐藏

layui-hide-xs 只在xs下隐藏
而layui-hide-sm 在sm，md，lg尺寸下都会隐藏，这与bootstrap不同
想要在sm隐藏且在md，lg显示：
layui-hide-sm layui-show-md-inline-block layui-show-lg-inline-block
显示：layui-show-*-*

layui
在这里插入图片描述
bootstrap

列偏移

layui

没有layui-col-*-offset0

layui-col-sm-offset* (1<=<=12) 在小、中、大屏幕都会生效，
直到出现 layui-col-md-offset、layui-col-lg-offset*覆盖它

解决办法：修改源码，添加layui-col-*-offset0、细节待定

bootstrap

有 col-sm-offset0，且只在sm屏幕下生效

表格

列宽 width:‘30%’, width:‘100’
全部不写宽度就平均分
只要一个写了宽度其他的就默认100px

常用

在这里插入图片描述
table自带分页

<table id="my-upload-model" lay-filter="my-upload-model"></table>
<script type="text/html" id="my-upload-model-toolbar">
    <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>

// 渲染表格
table.render({
    elem: '#my-upload-model'
    , url: 'http://xr.jxvive.com/api/model/auth/uploadModelList'
    , size: 'lg'
    , limit: 5  // 每页条数，默认为10
    , headers: {token: getStorage('token')}
    , where: { //传递额外参数
    }
    , response: {
        statusCode: 200 //规定成功的状态码，默认：0
        // , countName: 'total' //规定数据总数的字段名称，默认：count 这里和下面 //解析数据长度 两个地方有一个地方设置就行了
    }
    , parseData: function (res) { //res 即为原始返回的数据
        return {
            "code": res.code, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.data.total, //解析数据长度
            "data": res.data.records //解析数据列表
        };
    }
    , cols: [[
        {field: 'mid', title: 'ID', width: '12%', sort: true}
        , {field: 'title', width: '30%', title: '模型名称'}
        , {field: 'createTime', width: '20%', title: '上传时间', sort: true}
        , {
            field: 'auditStatus', width: '12%', title: '状态', templet: function (d) {  //d是包括该行所有信息的对象
                if (d.auditStatus == '0') {
                    return `未审核`
                } else if (d.auditStatus == '1') {
                    return `审核通过`
                } else if (d.auditStatus == '2') {
                    return `已驳回`
                } else {
                    return `未知`
                }
            }
        }, {field: 'species', width: '26%', title: '操作', toolbar: '#my-upload-model-toolbar'}

    ]]
    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout: ['count', 'prev', 'next'] //自定义分页布局
        //,curr: 5 //设定初始在第 5 页
        , first: false //不显示首页
        , last: false //不显示尾页
    }
});

//监听工具条 绑定的是table的lay-filter
table.on('tool(my-upload-model)', async function (obj) {
    var data = obj.data;  // 该行的数据对象
    console.log('选中行=>', data)
    if (obj.event === 'detail') {
        window.open(`./model-detail.html?id=${data.mid}`);
    } else if (obj.event === 'del') {
        layer.confirm('您确定要删除吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {

        }, function () {
            layer.msg('已取消');
        });
    } else if (obj.event === 'edit') {

    }
});

增删查改案例+批量操作

http://www.shagua.wiki/project/3?p=123 稍微有点复杂

分页

/*
	调用 getDownLoadManageList(type)
*/

//   获取分页
async function getDownLoadManageList(type, page = 1, limit = 10) {
    let $cardMain = $('.card-main')
    return new Promise((resolve, reject) => {
        window.getAjax(`/api/model/userDownloadPage?page=${page}&limit=${limit}&type=${type}`).then(res => {
            if (res.data.records.length==0){
                $cardMain.append(`<div style="text-align: center">您还没有下载，快去<a href="" style="color: #1E9FFF" target="_blank">下载</a>吧！</div>`)
                return false
            }
            for (const item of res.data.records) {
                let str = ` `
                $cardMain.append(str)
            }
            if (page <= 1) {
                paging(type,res.data.total, limit)
            }
        })
    })
}

// 总数 当前页
function paging(type, count, limit) {
    // 分页
    laypage.render({
        elem: 'download-manage-page' //注意，这里的 test1 是 ID，不用加 # 号
        , count: count //数据总数，从服务端得到
        , layout: ['limit', 'prev', 'page', 'next', 'count']
        , limit: limit
        , limits: [10, 15, 20, 25]
        , jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            //首次不执行
            if (!first) {
                //do something
                getDownLoadManageList(type, obj.curr, obj.limit)
            }
        }
    });
}

流加载

/*
	调用 loadModelInfoList(type)
*/

async function loadModelInfoList(type) {
    $('.card-main').children().remove();//  清除子元素
    let isNull = false
    await window.getAjax(`/api/model/userDownloadPage?page=1&limit=16&type=${type}`).then(res => {
        if (res.data.total == 0) {
            // 数据为空
            isNull = true
        }
    })
    layui.use('flow', function () {
        var flow = layui.flow
        flow.load({
            elem: '.card-main', // 列表容器
            // scrollElem: '.card-main', // 滚动条所在的容器（默认是document）
            end: isNull ? '<div>您还没有下载，快去<a href="" style="color: #1E9FFF" target="_blank">下载</a>吧！</div>'
            : '<section class=" ">没有更多了</section>',
            done: function (page = 1, next) { // page默认为 1
                let lis = [];
                window.getAjax(`/api/model/userDownloadPage?page=${page}&limit=16&type=${type}`).then(res => {
                    for (const item of res.data.records) {
                        let str = ``
                        lis.push(str)
                    }
                    // console.log('page', page)
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.data.total / 16);
                })
            }
        })
    })
}

弹出层

layer.msg参数含义及参数icon数字参数说明

https://blog.csdn.net/qq_36850813/article/details/89711784

layer.msg('信息', {icon: 0});

0	警告
1	成功
2	错误
3	疑问
4	锁定
5	哭脸
6	笑脸
7	警告

iframe层

父传子

// 父
layer.open({
    type: 2,//iframe层
    title: "图片裁剪",//标题
    area: ['1300px', '520px'],//弹出区域 宽 高
    maxmin: true,
    content: "clip.html",//所需弹出的界面
    success: function (layero, index) {    //成功获得加载html时，预先加载，将值从父窗口传到子窗口 layero当前层DOM index当前层索引
        // console.log(layero)
        let body = layer.getChildFrame('body', index);
        body.find("#modelId").text(mid);

    }
})

clip.html
// 子
<div id="modelId"></div>

子传父

// 子
//注意：parent 是 JS 自带的全局对象，可用于操作父页面
parent.GetValue(imgUrl); //GetValue是父界面的Js的window.GetValue方法
let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

// 父
// Frame子页面传过来的值
window.GetValue = function (imageUrl) {}

页面层

https://www.freesion.com/article/6971910362/

layer.open({
    type: 1, // 页面层
    area: ['500px', '450px'],
    title: '分享',
    shadeClose: true,
    fixed: false, //不固定
    maxmin: true,
    content: $('.share-layer'),
    cancel: function(index, layero){ 
        if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            layer.close(index)
        }
        return false; 
    }    
    end: function(){ 
    	// content隐藏、表单值置空等其他操作
	}    
});

// 最好放在body最外层
<div class="share-layer" style="display: none">
   
</div>

util 模块

util.event

<button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-event="comment-update" data-comment="${item.comment}" data-id="${item.id}">修改</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-event="comment-del" data-id="${item.id}">删除</button>

//处理属性 为 lay-event 的所有元素事件
util.event('lay-event', {
    'comment-update': function () {
        let id = $(this).data('id')
        let comment = $(this).data('comment')
		
        },
    'comment-del': function () {
        let id = $(this).data('id')

        }
});

官网
HTML：
<button class="layui-btn" lay-active="e1">事件1</button>
<button class="layui-btn" lay-active="e2">事件2</button>
<button class="layui-btn" lay-active="e3">事件3</button>
 
JavaScript：
<script>
layui.use('util', function(){
  var util = layui.util;
  
  //处理属性 为 lay-active 的所有元素事件
  util.event('lay-active', {
    e1: function(othis){
      alert('触发了事件1');
    }
    ,e2: function(othis){
      alert('触发了事件2');
    }
    ,e3: function(othis){
      alert('触发了事件3');
    }
  });
});
</script>

laytpl

综合案例+数据回显（值得好好看一下）
http://www.shagua.wiki/project/3?p=113

学习源码

https://gitee.com/-/ide/project/sentsin/layui/edit/master/-/src/css/layui.css

按钮

<button>原生按钮</button>
<button class="layui-btn">按钮1</button>
<button class="layui-btn layui-btn-radius">按钮2</button>
<button class="layui-btn layui-btn-disabled">按钮3</button>
<button class="layui-btn layui-btn-fluid">按钮4</button>


.layui-btn {
  display: inline-block;
  vertical-align: middle;
  height: 38px;
  line-height: 38px;
  /* button默认会有边框 2px outset 浅灰*/
  border: 1px solid transparent;
  /* button默认为 浅灰*/
  background-color: #009688;
  /* button默认为 黑色*/
  color: #fff;
  /* 默认会换行 noraml */
  white-space: nowrap;
  /* text-align: center; */

  /* 撑开按钮 */
  font-size: 18px;
  padding: 0 18px;
  border-radius: 2px;
  cursor: pointer;
}
/* 默认背景变深灰 */
.layui-btn:hover {
  /* hover前按钮的透明度为 1 */
  opacity: 0.8;
  /* 下面两个非必须 下同 */
  filter: alpha(opacity=80);
  color: #fff;
}
.layui-btn:active {
  /* 没按时按钮的透明度为 1 */
  opacity: 1;
  filter: alpha(opacity=100);
}
/* 圆角 */
.layui-btn-radius {
  border-radius: 100px;
}

/* 禁用 */
.layui-btn-disabled,
.layui-btn-disabled:hover,
.layui-btn-disabled:active {
  border-color: #eee !important;
  background-color: #fbfbfb !important;
  color: #d2d2d2 !important;
  /* 鼠标禁止样式 */
  cursor: not-allowed !important;
  opacity: 1;
}
/* 流体 */
.layui-btn-fluid {
  width: 100%;
}

在这里插入图片描述

输入框

      <input
        type="text"
        name="title"
        required
        placeholder="请输入标题"
        autocomplete="off"
      />
      <input
        type="text"
        name="title"
        required
        placeholder="请输入标题"
        autocomplete="off"
        class="layui-input"
      />

.layui-input {
  /* 默认选中时会出现 黑框 */
  outline: none;
  height: 38px;
  /* line-height: 1.3; */
  line-height: 38px;
  /* 默认为2px */
  border-width: 1px;
  /* 默认为 inset */
  border-style: solid;
  border-color: #eee;
  /* background-color: #fff; */
  /* color: rgba(0, 0, 0, 0.85); */
  /* border-radius: 2px; */

  /* display: block; */
  /* width: 100%; */
  /* 默认提示文字往右走一点 */
  padding-left: 10px;
}

/* 鼠标选中 */
.layui-input:focus {
  border-color: #d2d2d2 !important;
}

在这里插入图片描述

textarea

      <textarea name="desc" placeholder="请输入内容"></textarea>
      
      <textarea
        name="desc"
        placeholder="请输入内容"
        class="layui-textarea"
      ></textarea>

.layui-textarea {
  width: 100%;
  min-height: 100px;
  padding: 6px 10px;
  line-height: 20px;
  /* 默认选中时会出现 黑框 */
  outline: none;
  border-radius: 2px;
  border-color: #eee;
  border-width: 1px;
  /* 默认为 inset */
  border-style: solid;
  border-radius: 2px;
  /* 只能往上下跳整 */
  resize: vertical;
}

.layui-textarea:focus {
  border-color: #d2d2d2 !important;
}

在这里插入图片描述

myaijarvis

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【前端】layui 笔记

技巧行内显示layui-input-block 一个表单元素占一行layui-inline 用于将标签设为内联块状元素（父）layui-input-inline 可以放置多个表单元素（子）<div class="layui-inline"><div class="layui-input-inline" style="width: 100px;"> <input type="text" name="price_min" placeholder="￥"
复制链接

扫一扫

专栏目录