layer弹出层组件实现加载效果

最新推荐文章于 2023-08-01 16:58:29 发布

ostuthere

最新推荐文章于 2023-08-01 16:58:29 发布

阅读量1.5k

点赞数 1

分类专栏： layer 文章标签： layui css

本文链接：https://blog.csdn.net/qq_35727582/article/details/116596874

版权

layer 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

layer弹出层组件挺实用的，需要跟jQuery配合使用，下面介绍一下利用layer制作加载层。

使用layer.load()

layer.load(1,{	// 0/1/2表示图标，load有三种可选图标
  time: 1000, // 自动关闭，表示多少毫秒后自动关闭，load默认为0，表示不会自动关闭
  shade: [0.3, '#000'],	// 设置遮罩层的透明度以及背景色，默认为白色透明
  success: function(layero, index) { 
  	// 弹出层创建完毕时的回调函数，有两个参数，layero表示当前dom层，index表示当前层索引
    layero.find('.layui-layer-loading1').css({
      // 可以更改图标大小或其他样式
      'background-size':'60px 60px',
      'width':'60px',
      'height':'60px',
    });
  }
});

效果图如下，1秒后自动关闭。

在这里插入图片描述

使用layer.msg()

layer.msg('<br>保存中...', {
  icon: 16,
  time: 3000,
  shade: [0.3, '#000']
});

效果图如下所示

在这里插入图片描述
需要将边框去除，并将图片放置在弹出框中部，修改后的代码如下所示。

layer.msg('保存中...', {
  icon: 16,
  shade: [0.3, '#000'],
  time: 3000,	// msg的默认自动关闭时间就是3秒
  success: function (layero) {
    layero.css({
      // 去除边框
      'border': 'none'
    });
    layero.find('.layui-layer-content').css({
      // 调整文字的位置
      'text-align': 'center',
      'padding': '45px 20px 15px 20px',
    });
    layero.find('.layui-layer-content .layui-layer-ico').css({
       // 居中图片
      'top': '0',
      'right': '0',
      'bottom': '0',
      'left': '0',
      'margin': '10px auto'
    });
  }
});