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

最新推荐文章于 2022-09-27 17:17:07 发布

ztnhnr

最新推荐文章于 2022-09-27 17:17:07 发布

阅读量1.8k

点赞数

分类专栏： js html css

本文链接：https://blog.csdn.net/ztnhnr/article/details/107813667

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

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

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

效果如下图：

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

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

<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 的样式，让图标和内容文本错开，效果如下：

另外，我们也可以通过 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>

效果图如下：