前言

这一篇讲解Layui使用中的小技巧分为两大类:小技巧、工具

一、技巧

1、form表单on监听将刷新页面刷新了

form.on('submit(formSingSave)', function (data) {
 return false;// 不刷新
 });

这里默认刷新return true,只有返回false才不刷新

2、layui清空,重置表单数据的实例

表单

<form class="layui-form" action="" lay-filter="addGoodsForm" id="addGoodsForm">
 主题内容
</form>

js

//监听提交
form.on('submit(upGoodsBtn)', function(data){
 var formDate = data.field;
 $.ajax({
  success: function (data) {
   if (data.success){
    top.layer.msg("商品发布成功了,等待管理员审核", {time:3000});
    // 清空表单 (“addGoodsForm”是表单的id)
    $("#addGoodsForm")[0].reset();
    layui.form.render();
   }else{
    top.layer.msg("商品发布失败,请重新发布吧!", {time:3000});
    // 清空表单 (“addGoodsForm”是表单的id)
    $("#addGoodsForm")[0].reset();
    layui.form.render();
   }
  }
 });
 return false;
});

二、工具

弹框

layer.open({
    // 基本层类型:0(信息框,默认)1(页面层)2(iframe层,也就是解析content)3(加载层)4(tips层)
    type: 1,
    title: "标题",
    // 当type: 2时就是url
    content: "内容/url",
    // 宽高:如果是100%就是满屏
    area: ['733px', '450px'],
    // 坐标:auto(默认坐标,即垂直水平居中),具体当文档:https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按钮:按钮1的回调是yes(也可以是btn1),而从按钮2开始,则回调为btn2: function(){},以此类推
    btn: ['按钮1', '按钮2'],
    // 关闭按钮:layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则0
    closeBtn: 1,
    // 遮罩:默认:0.3透明度的黑色背景('#000')
    shade: 0.3,
    // 是否点击遮罩关闭:默认:false
    shadeClose: false,
    // 自动关闭所需毫秒:默认:0不会自动关闭
    time: 0,
    // 最大最小化:默认:false
    maxmin: false,
    // 固定:默认:true
    fixed: true,
    // 是否允许拉伸:默认:true
    resize: true,
    // 层叠顺序:默认:19891014,一般用于解决和其它组件的层叠冲突
    zIndex: 19891014,
    // 层弹出后的成功回调方法:layero前层DOM,index当前层索引
    success: function(layero, index){
    },
    // 第一个按钮事件,也可以叫btn1
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    // 右上角关闭按钮触发的回调:默认会自动触发关闭。如果不想关闭,return false即可
    cancel: function(index, layero){
        if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
            layer.close(index);
        }
        return false;
    },
    // 层销毁后触发的回调:无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
    end: function(){
    },
    // 最大化后触发的回调:携带一个参数,即当前层DOM
    full: function(layero){
    },
    // 最小化后触发的回调:携带一个参数,即当前层DOM
    min: function(layero){
    },
    // 还原后触发的回调:携带一个参数,即当前层DOM
    restore: function(layero){
    },
});