转自: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图标小结”的全部内容。

layui弹出层:使用icon图标小结的更多相关文章

  1. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  2. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  3. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  4. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

  5. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  6. adminlte+layui框架搭建3 - layui弹出层

    在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...

  7. layui弹出层基础参数

    一.type-层类型 类型:Number  默认为0(信息框); 1(页面层),可以在页面添加HTML内容 2(iframe层) 3(加载层)加载时显示的弹出框 4(tips层) 需要绑定ID就不展示 ...

  8. layui弹出层处理(获取、操作弹出层数据等)

    要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...

  9. Layui弹出层详解

    今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦  今天放 ...

  10. layui弹出层layer点击关闭还会显示在html中

    我的弹出层是这样定义的: 它的属性为display:none <div id="divlayer" style="display:none"> &l ...

随机推荐

  1. java进阶(37)--多线程

    文档目录: 一.进程与线程 二.多线程的实现 三.获取线程名与线程对象 四.线程sleep方法 五.线程调度与优先级 六.线程安全(重点) 七.死锁 ------------------------- ...

  2. .NET静态代码织入——肉夹馍(Rougamo)发布2.2

    肉夹馍(https://github.com/inversionhourglass/Rougamo)通过静态代码织入方式实现AOP的组件,其主要特点是在编译时完成AOP代码织入,相比动态代理可以减少应 ...

  3. 面试官:Redis持久化能关吗?怎么关?

    数据持久化是指将数据从内存中,保存到磁盘或其他持久存储介质的过程,这样做的目的是为了保证数据不丢失. 而 Redis 的持久化功能默认是开启的,这样做的目的也是为了保证程序的稳定性(防止缓存雪崩.缓存 ...

  4. C语言中的操作符:了解与实践

    ​ 欢迎大家来到贝蒂大讲堂 ​ 养成好习惯,先赞后看哦~ ​ 所属专栏:C语言学习 ​ 贝蒂的主页:Betty's blog 1. 操作符的分类 操作符又叫运算符,它在C语言中起着非常大的作用,以下是 ...

  5. 【TouchGFX】MIXINS - ClickListener

    ClickListener Click Listener混合器使它可以应用到其小部件,并能够通过使用回调扩展小部件来响应触摸输入. 在TouchGFX Designer中,可以通过在" Mi ...

  6. phpcms - 在删除文章后实现自动删除tag标签

    在使用phpcms程序制作网站的时候,我们会发现文章模型新建一篇文章后会自动向数据库中插入关键词,但如果删除文章后,数据库中的关键词表中字段中还存在之前文章的关键词,那么怎样才能在phpcms后台中删 ...

  7. [转帖]彻底搞明白 GB2312、GBK 和 GB18030

    https://zhuanlan.zhihu.com/p/453675608 日常工作的过程中,关于字符编码的问题经常让人头疼不已,这篇文章就来捋一捋关于 GB2312.GBK.GB18030 相关的 ...

  8. [转帖]idea配置tomcat参数,防止nvarchar保存韩文、俄文、日文等乱码

    描述下我的场景: 数据库服务器在远程机器上,数据库使用的Oracle,字符集是ZHS16GBK,但保存韩文.俄文.日文等字段A的数据类型是nvarchar(120),而nvarchar使用的是Unic ...

  9. 【转帖】GPT4All开源的聊天机器人

    GPT4All是一个开源的聊天机器人,它基于LLaMA的大型语言模型训练而成,使用了大量的干净的助手数据,包括代码.故事和对话.它可以在本地运行,不需要云服务或登录,也可以通过Python或Types ...

  10. vue3.2新增指令v-memo的使用

    v-memo的讲解 vue3.2中新增了一个性能优化的指令: 这个指令就是v-memo; v-memo:可以做性能优化,v-memo中值若不发生变化,整个子树的更新会被跳过. <div v-me ...