kayui进行添加_layui的loading加载层添加自定义文本

前端开发，使用的是layui框架。异步装载数据时，使用layui的loading加载层展示装载效果。而layui默认的loading加载层常用的是切换图标，如下：

layui.use(['layer'], function () {

layer = layui.layer;

// loading

layer.load(2, {

time: 2000

})

})

效果如下图：

如果给content属性赋值文本，显示效果如下：

可以看到图标和内容文本重叠到一起了，这时，我们可以通过以下代码将图标和内容文本分开：

layui.use(['layer'], function () {

layer = layui.layer;

var loading = layer.load(2, { // icon0-2 加载中,页面显示不同样式

shade: [0.4, '#000'], // 0.4为透明度 ，#000 为颜色

content: '我是loading',

success: function (obj) {

obj.find('.layui-layer-content').css({

'color': 'white',

'padding-top': '40px', // 图标与样式会重合，这样设置可以错开

'width': '200px' // 文字显示的宽度

});

}

});

setTimeout(function () {

layer.close(loading)

}, 3000)

})

通过上面的代码，可以看出，主要是在 success 回调方法中，重新设置 content 的样式，让图标和内容文本错开，效果如下：

另外，我们也可以通过 layer.msg() 方法实现类似的效果，代码如下：

layui.use(['layer'], function () {

layer = layui.layer;

// var loading = layer.load(2, { // icon0-2 加载中,页面显示不同样式

//     shade: [0.4, '#000'], // 0.4为透明度 ，#000 为颜色

//     content: '我是loading',

//     success: function (obj) {

//         obj.find('.layui-layer-content').css({

//             'color': 'white',

//             'padding-top': '40px', // 图标与样式会重合，这样设置可以错开

//             'width': '200px' // 文字显示的宽度

//         });

//     }

// });

// 使用msg显示loading

var loading = layer.msg('我是loading', {

icon: 16,

shade: [0.1, '#000'],

time: false  // 取消自动关闭

});

setTimeout(function () {

layer.close(loading)

}, 3000)

})

效果图如下：