layui.msg 弹出时间后回调函数

 var nowcurr = 1   //当前页
     //第一个实例
                var tableIns = table.render({
                    id: "role",
                    elem: '#demo',
                    limit: 20,
                    size: 'lg',
                    method: 'POST',
                    url: '/admin/root/roleList' //数据接口
                    ,
                    page: true //开启分页
                    ,
                    where: {
                        "token": localStorage.getItem('token'),
                    },
                    totalRow: true,
                    limits: [20, 40, 60, 80, 100],
                    limit: 1,
                    cols: [
                        [ //表头
                            {
                                field: 'roleId',
                                title: 'ID',
                                align: 'center'
                            }, {
                                field: 'name',
                                title: '用户昵称',
                                align: 'center',
                            }, {
                                field: 'desc',
                                title: '描述',
                                align: 'center',
                            }, {
                                field: 'status',
                                title: '是否启用',
                                align: 'center',
                                templet: function (d) {
                                    if (d.status == 0) { //未打卡
                                        return ' <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></td>';
                                    } else {
                                        return "已打开"
                                    }
                                }
                            }, {
                                toolbar: '#bianji',
                                title: '编辑',
                                align: 'center',
                                width: 200
                            },


                        ]
                    ],
                    id: 'testReload',
                    parseData: function (res) { //res 即为原始返回的数据
                    
                    }, done: function (res, curr, count) {   //返回数据执行回调函数
                        nowcurr = curr	//设置当前页
                        layer.close(loading);    //返回数据关闭loading
                    }



                });

弹出框 一定时间之后回调 保证弹框内容能看清楚

 layer.msg(result.msg, {
     icon: 6, time: 1500, shade: 0.4
      }, function () {
          layer.closeAll();//疯狂模式,关闭所有层
          tableIns.reload({
              page: {
                  curr: nowcurr
              }
          });
      });
### 修改Layui图片上传成功后的消息框样式 为了自定义Layui图片上传组件中的消息提示框(msg)样式,可以采用多种方法来调整默认的行为和外观。一种常见的方式是在JavaScript中通过配置`done`回调函数来自定义上传成功的处理逻辑,并利用CSS覆盖原有的样式。 #### JavaScript端设置自定义提示 当使用Layui的upload模块时,在初始化该模块的时候可以通过指定事件监听器来控制文件上传完成之后的操作。下面是一个简单的例子展示如何在文件上传完成后显示一个定制化的消息框: ```javascript layui.use(['upload'], function(){ var upload = layui.upload; // 执行实例 upload.render({ elem: '#testUpload' // 绑定元素 ,url: '/upload/' // 上传接口 ,accept: 'images' ,done: function(res){ if (res.code === 0){ // 假设返回码为0表示成功 layer.msg('上传成功', { time: 2000, // 自动关闭时间(ms),这里设定两秒后自动消失 skin: 'my-layer-skin' // 应用额外类名以应用特定样式 }); // 处理其他业务逻辑... } else { console.error("Error:", res); } } ,error: function(){ // 请求异常回调 layer.msg('请求失败'); } }); }); ``` 上述代码片段展示了如何向`layer.msg()`传递第二个参数对象,其中包含了用于改变消息框行为和样式的选项。特别是`skin`属性允许添加额外的CSS类到消息层上,从而能够轻松地对其进行美化[^2]。 #### CSS部分实现个性化设计 接着可以在项目的CSS文件里定义`.my-layer-skin`类的具体样式规则,比如更改背景颜色、字体大小或者其他任何想要的效果: ```css .my-layer-skin .layui-layer-content{ background-color:#f96; color:white; font-size:18px; } /* 可能还需要针对不同版本做适配 */ .layui-edge{border:none!important;} ``` 以上做法不仅限于修改文字的颜色或尺寸;还可以进一步扩展至整个对话框的设计,如边框宽度、圆角半径等更多细节上的优化[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值