Layui的使用

3,083 阅读4分钟

在这里主要记录一些本人在使用layui与后端进行交互时的一些相关操作。

如果本文章帮助到了您,可以点个赞,有问题也可以在评论区留言。我看到后会统一回复的。

在使用之前,记得自己先引入layui相关的模块。 如下:

<link id="layuicss-layer" rel="stylesheet" href="https://res.layui.com/layui/dist/css/modules/layer/default/layer.css?v=3.1.1" media="all">

<script src="//res.layui.com/layui/dist/layui.js?t=1603620926702" charset="utf-8"></script>

Layui使用ajax请求

用法如下:

<button class="layui-btn layui-btn-sm layui-bg-orange" onclick="dele(这里传你要删除的id);">删除</button>

js代码如下:

<script>
      function dele(id){
        layui.use('layer',function(){
            var layer = layui.layer;
              layer.msg('你确定删除么?', {
              time: 2000 ,//2秒自动关闭
              btn: ['确定', '取消'],
              yes: function(index){
                  console.log(id);
                  $.ajax({
                      url:"ajax地扯",
                      data:{'id':id},
                      type:"Post",
                      dataType:"json",
                      success:function(data){
                        console.log(data);
                          layer.msg(data.msg);
                          location.reload(); //删除成功后再刷新
                      },
                      error:function(data){
                          $.messager.alert('错误',data.msg);
                      }
                  });
                  layer.close(index);
              }
          });
        });
    };
  </script>

效果图如下:

layer.msg的使用

js代码如下:

layer.msg('只想弱弱提示');


layer.msg('表情提示', {icon: 6}); 


layer.msg('关闭后想做些什么呢', function(){
  //自动执行这里面的内容
}); 

// 第三种
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  //2秒后自动执行这里面的内容
}); 

layui弹窗的使用

关键代码如下:

var truelogin = "admin";
var truepwd = "123456";
layui.use('layer', function () {
        var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
        var index = layer.alert(msgalert, {
            icon: 6, //icon数字参数
            time: 2000, //时间(默认是毫秒),2000为 2秒
            offset: 't', //t为顶部,b为底部,m为中间,r为右侧,l为左侧
            closeBtn: 0, //是否显示弹出窗右上角的关闭按钮 0为不显示 ,1为显示。
            title: '友情提示', //弹出窗的标题
            btn: [], //弹出窗的底部按钮
            anim: 2,
            shade: 0
        });
        layer.style(index, {
            color: '#777'
        });
    });

Layui弹窗加载页面

用法如下:

<div class="layui-input-inline add_admin" style="width:95px;">
	<a class="layui-btn layui-btn-sm" href="javascript:void(0);">
      <i class="layui-icon">&#xe608;</i>添加管理员
    </a>
</div>

js代码如下:

<script>
    layui.use(['element','jquery','layer'], function(){
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        $('.add_admin').click(function () {
            layer.open({
                type: 2,
                title:'添加管理员',
                skin: 'layui-layer-rim', //加上边框
                maxmin: true, //开启最大化最小化按钮
                area: ['600px', '400px'],
                content:"加载的页面地扯,比如:http://www.baidu.com"
            });
        });
        
    });
</script>

layui开关switch的使用

主要应用场景:

  • 产品中的某个字段:上架或者下架。比如(1 代表上架,0 代表下架
  • 某些状态:只有 0 或 1 的这种情况。
  • 还有就是显示隐藏了。

用法如下:

<input type="checkbox" name="switch" lay-skin="switch" lay-text="正常|关闭" lay-filter="switchTest" value="1">
	<div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch">
        <em>ON</em><i></i>
    </div>

js代码如下:

<script>
// 状态监听开关
        layui.use(['form'], function () {
            var form = layui.form
                , layer = layui.layer
            //监听指定开关
            form.on('switch(switchTest)', function (data) {
                if (this.checked) {
                    layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)
                } else {
                    layer.msg('开关: 关掉了', {
                        offset: '6px'
                    });
                }
                //do some ajax opeartiopns;
            });
        });
</script>

效果图如下:

layer加载动画效果

var loading = layer.load(2,{shade:false,time:2000});

解释:

  • 2 代表的是加载的风格。有 0,1,2。
  • shade:false 代表的是 不显示遮罩。如果为 true 就会有遮罩。
  • time:2000 代表的是 加载等待时间。2000毫秒也就是 2 秒后加载层就会关闭。

关闭loading (可以在ajax成功或失败回调中进行关闭) :

layer.close(loading);

注意:load默认不会自动关闭

实战

应用:删除某个产品我想要先弹出一个加载层,然后等待3秒的时间再进行删除的操作。另外加的一个功能是:禁止一次性点击多次,采用 3秒后才能再进行点击。

html

<button type="button" class="layui-btn layui-btn-danger del_template" data-tid="222">删除</button>

js

$(".del_template").click(function() {
    let tid = $(this).attr("data-tid");
    $(this).attr("disabled", "true");
    let loading = layer.load(2, {
        shade: false,
        time: 2000
    });
    setTimeout(function() {
        $(this).attr("disabled", "false");
        $.ajax({
            type: "POST",
            url: "/user/del_template",
            data: {
                "tid": tid
            },
            dataType: "json",
            success: function(data) {
            	layer.close(loading); // 关闭加载层
                if (data.status_code === 200) {
                    layer.msg(data.msg, {
                        icon: 6,
                        time: 2000
                    },
                    function() {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.window.location.reload();
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 2,
                        time: 1200
                    })
                }
            }
        })
    },
    2000);
});

后端返回的json数据

  • 后端路由:/user/del_template
  • 请求方式:post
  • 发送的参数:tid
  • 返回成功的结果
    • 删除成功的返回:
{
    "msg":"删除成功",
    "status_code":200
}
  • 返回失败的结果
    • 删除失败的返回:
{
    "msg":"删除失败",
    "status_code":201
}

加载动画下增加文字提示

layer.load(2, { //icon支持传入0-2
    shade: [0.4, '#000'],
    //0.5透明度的灰色背景
    offset: ['40%', '45%'],
    //位置
    content: '正在加载中...',
    success: function(layero) {
        layero.find('.layui-layer-content').css({
            'color': '#fff',
            'padding-top': '78px',
            'padding-left': '13px',
            'width': '60px',
            'font-size': '16px'

        });
    }
});

layer.confirm的相关使用

询问层简单的使用

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

解释:

  • title 询问层标题
  • btn 里面放按钮的文本内容。两个文本就对应两个function

效果图如下:

询问层里的icon详解

icon:0 黄色叹号

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 0,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下:

icon:1 绿色勾选

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 1,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下:

icon:2 红色错误

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 2,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下:

icon:3 黄色问号

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 3,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下:

icon:4 灰色加密

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 4,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下:

icon:5 红色坏脸

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 5,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下:

icon:6 绿色笑脸

layer.confirm("删除该文件夹会同时删除里面的文件", {
    title: "提示标题",
    icon: 6,
    btn: ['确认删除', '取消']
},
function() {
    console.log("确认删除");
},
function() {
    console.log('取消');
    let index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
});

效果图如下: