layui弹出层:使用icon图标小结

转自: https://www.cnblogs.com/webSnow/p/15470350.html

layui弹出层:使用icon图标小结

Layui 踩坑篇

layui的弹框插件layer中,有很多不同场景需要的弹框icon图标,今天小结一下,方便以后使用;

 

 

 

官方文档地址:https://layer.layui.com/(可能已停) 或 https://www.layui.site

表格示下:

 

 

 

 icon截图 · 说明 建议场景 icon: 调用代码 调用代码示例

1 默认:无图标 任意 默认:无需设置 默认:无需设置
2 警示提醒类 0 icon: 0
3 成功提示类 1 icon: 1
4 错误返回类 2 icon: 2
5 交互问答类 3 icon: 3
6 禁止修改类 4 icon: 4
7 校验 不通过类 5 icon: 5
8 校验 通过类 6 icon: 6
9 加载层 layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
10 loading层 layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 });
11 其他待定 暂略 暂略

调用代码:

复制代码
复制代码
layer.alert('验证码错误', {
    icon: 0,
})

或
                    let msg = '返回的内容'    
                    //错误信息提示
                    layer.alert(msg, {
                        skin: 'layui-layer-molv' //样式类名  自定义样式
                        ,title:'信息反馈'
                        ,closeBtn: 1    // 是否显示关闭按钮
                        ,anim: 1 //动画类型
                        ,btn: ['确定'] //按钮
                        ,icon: 2    // icon
                        ,yes:function(){
                            // window.location.reload();
                            layer.closeAll();
                        }
                        ,end : function() {//右上方关闭按钮时候的回调
                        }
                    });                     
复制代码
复制代码

 

效果图大概如下

 加

 skin: 'layui-layer-molv'后的

 

 

 

 


以上就是关于“layui弹出层:icon图标小结”的全部内容。

posted @   瘦子梅西尔  阅读(3115)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示