WithCoderWithCoderWithCoder

layui的loading加载层添加自定义文本

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

<script>
    layui.use(['layer'], function () {
        layer = layui.layer;
        
        // loading
        layer.load(2, {
            time: 2000
        })
    })
</script>

    效果如下图:

    1-200H2141I4343.png

    如果给content属性赋值文本,显示效果如下:

    1-200H2141T2Y9.png

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

<script>
    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)
    })
</script>

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

    1-200H214235H96.png

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

<script>
    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)
    })
</script>

    效果图如下:

    1-200H2142G3Z0.png

欢迎分享交流,转载请注明出处:WithCoder » layui的loading加载层添加自定义文本