Layui

使用

引入方式

• 模块化

  • 引入layui.js文件和layui.css文件
  • layui.use([模块数组],function(){JS代码});

• 非模块化

  • 直接引入layui.all.js文件(相当于引入所有模块)和layui.css文件

    • 这样就不需要use代码

使用方法

• 一般新建一变量

• var layer= layui.layer; 使用layer模块就不用加layui前缀

  • 这样比较简单,方便

元素

图标

• 需要一个容器标签才可以显示

• 相关样式

  • layui-icon

• 使用实体字符或者使用类名

  • &#xe6c9

按钮

• 相关样式

  • 必要样式

    • layui-btn

  • 主题样式

    • layui-btn-primary(原始按钮)
    • layui-btn-normal(百搭按钮)
    • layui-btn-warm(暖色按钮)
    • layui-btn-danger(警告按钮)
    • layui-btn-disabled(禁用按钮)

  • 尺寸

    • layui-btn-lg(最大按钮)
    • 默认按钮不加
    • layui-btn-sm(小型按钮)
    • layui-btn-xs(微型按钮)

  • 其它样式

    • layui-btn-radius(圆角按钮)
    • 外层div添加样式:layui-btn-group(按钮组)

导航菜单

• 相关样式

  • 方向

    • layui-nav(水平)
    • layui-nav-tree(垂直)

  • 其它样式

    • layui-nav(导航菜单)
    • layui-nav-item(导航菜单的子项目列表)
    • layui-nav-child(指向的子项)
    • layui-this(通用,默认选择)

选项卡

• 相关样式

  • 风格

    • layui-tab(默认风格_
    • layui-tab-brief(简洁风格)
    • layui-tab-card(卡片风格)

  • 其它样式

    • layui-tab-title(卡片头)
    • layui-this(默认选中)
    • layui-tab-content(卡片内容外层)
    • layui-tab-item(卡片内容)
    • layui-show(显示卡片)

• 相关属性

  • lay-allowclose="true"(使卡片可以关闭)
  • lay-filter="demo"(layui可以找到元素)

• 相关方法

进度条

• 相关样式

  • layui-progress(外层div)
  • layui-progress-bar(内层div)
  • layui-progress-big(大号进度条,文本显示在里面)

• 相关属性

  • lay-percent="10%"(设置进度,内层)
  • lay-showPercent="yes"(外层div,用于显示文本)

面板

• 相关样式

  • layui-card-header(面板标题)

  • layui-card-body(面板内容)

  • 折叠面板

    • layui-collapse(整个面板容器)
    • layui-colla-item(面板块)
    • layui-colla-title(面板标题)
    • layui-colla-content(面板内容)
    • layui-show(初始展开)

  • 手风琴面板

    • 在折叠面板容器中设置属性lay-accordion即可
    • 面板只能存在一个打开状态,不可以多个同时打开

徽章

• 相关样式

  • layui-badge-dot(不可以加文字,小圆点,改变背景改变颜色)
  • layui-badge(椭圆体)
  • layui-badge-rim(边框体)

• 一般用于插入其他元素中间修饰作用,类似于邮件有多少封未读

时间线

• 相关样式

  • layui-timeline(时间线外层)

  • layui-timeline-item(单个时间线的内容)

  • 插入图标用一个容器

    • 

  • layui-timeline-content(具体内容层)

  • layui-timeline-title(具体内容标题)

  • 下面接一个层用于设置内容

表格

• 相关样式

  • layui-table(普通表格)

• 相关属性

  • lay-even

    • 使用隔行背景

  • lay-skin="属性值"

    • line(行边框风格)
    • row(列边框风格)
    • nob(无边框风格)

  • lay-size="属性值"

    • sm(小尺寸)
    • lg(大尺寸)

动画

• 相关样式

  • layui-anim(必要样式)

  • layui-anim-loop(循环动画)

  • 动画样式

    • layui-anim-up(底部向上滑动)
    • layui-anim-upbit(微微向上滑动)
    • layui-anim-scale(平滑放大)
    • layui-anim-scaleSpring(弹簧式放大)
    • layui-anim-fadein(逐渐显示)
    • layui-anim-fadeout(逐渐消失)
    • layui-anim-rotate(360度旋转)

辅助元素

• 引用

  • layui-elem-quote(引用区域的文字)

• 字段集区块

  • layui-elem-field(设置区块div)
  • 标签设置区块标题
  • layui-field-box(设置区块内容)

模块

layer:弹出层

• 属性

  • type

    • 0(默认信息框)
    • 1(页面层)
    • 2(iframe层)
    • 3(加载层)
    • 4(tips层)

  • title

    • 设置标题文本
    • 可以以数组形式填写标题内容和样式

  • content

    • 可以写很多东西
    • HTML内容
    • 超链接等

  • skin

    • 使用某个css类

  • area

    • 设置宽和高,以数组形式
    • area:[‘200px‘,‘200px‘]

  • offset

    • 用于设置弹出层的位置坐标
    • auto(默认,中间)
    • 定义一个值默认是top
    • 定义两个是绝对位置
    • 使用首字母,例如:offset:‘lt‘左上角

  • icon

    • 内部有7个icon
    • 所以参数是数字
    • 默认没有,一共有0-6个编号
    • 加载层有0-2个

  • btn

    • 按钮,btn:[‘btn1‘,‘btn2‘]

    • 可以有无限个按钮

    • 按钮回调,,btn2:function(index,layero){}

    • btnAlign

      • 按钮对齐
      • l:左对齐
      • r:右对齐
      • c:居中对齐

    • closeBtn

      • 关闭按钮的风格
      • 默认为1,第二种比较丑

  • shade

    • 设置毛玻璃背景

    • 除了弹出层意外的窗口内部用一个背景色遮住可以设置透明度

    • shade:[0.4,‘#fff‘]

      • 默认0.3

    • ShadeClose

      • 默认关闭
      • 设置true打开
      • 点击弹出层以外部分可以关闭弹出层

  • time

    • 自动关闭(毫秒)
    • 默认不会自动关闭

  • id

    • 弹出层唯一表示,一般用于页面层或者iframe

  • anim

    • 弹出动画

    • 默认0:平滑放大

    • 1:从上掉落

    • 2:底部向上滑入

    • 3:左滑入

    • 4:左翻滚

    • 5:逐渐显示

    • 6:抖动

    • isOutAnim

      • 默认关闭弹出有个动画(默认开启),设置false可以关闭

  • 页面尺寸以及定位

    • fixed

      • 默认固定(true)
      • 如果不固定会跟随页面滚动

    • resize

      • 是否允许拉伸

      • 默认true

      • resizing:function()

        • 监听窗口拉伸动作

    • maxWidth&maxHeight

      • 最大宽度,area:‘auto‘有效
      • 高度自适应有效

    • scrollbar

      • 是否允许浏览器出现滚动条
      • 默认true

    • zIndex

      • 层叠顺序,用于解决其他组件层叠冲突

    • maxmin

      • 最大最小化默认false

  • move

    • 是否允许拖动

    • 默认true

    • moveOut

      • 是否可以拖动到窗口外面
      • 默认false

    • moveEnd:function()

      • 拖动完以后的回调函数(默认没有)

  • tips

    • 四个方向弹出

      • 1-4(顺时针)
      • 以数组方式设置颜色
      • tips:[1,‘#fff‘]

    • tipMore

      • 是否允许多个共存
      • 默认false

• 方法

  • 语法

    • success:function()

  • success

    • 成功后的回调方法
    • 参数是DOM和索引

  • yes

    • 确认按钮回调方法
    • 参数是DOM和索引

  • cancel

    • 关闭按钮回调方法
    • 参数是DOM和索引

  • end

    • 层销毁触发回调函数
    • 无参数

  • full/min/restore

    • 放大缩小还原触发回调
    • DOM

  • layer.config()

    • 初始化全局配置

  • layer.ready()

    • 初始化就绪

  • layer.open()

    • 核心方法,用于创建层

  • layer.alert()

    • 可以添加图标,以及回调函数

  • layer.confirm()

    • 可以添加图标和回调

  • layer.msg

    • 图标回调
    • 设置关闭时间

  • layer.load

    • 加载层

    • 设置等待时间以及风格

      • 风格0-2

    • var x = layer.load(2,{time:2000});

    • layer.close(x);

  • layer.tips

    • 类似msg

  • layer.close()

    • 关闭特定层
    • 创建层的时候赋值给一个变量即可

  • layer.coseAll()

    • 关闭所以层,在不指定类型的情况下
    • 例如指定:layer.closeAll(page);

  • layer.style(index,cssstyle)

    • 给指定层设置css样式

  • layer.title("标题内容",index)

    • 给指定层改变标题

  • layer.getChildFrame(selector, index)

    • 获取iframe页面DOM

  • layer.getFrameIndex(windowName)

    • 获取iframe指定层的索引

  • layer.iframeAuto(index)

    • 指定iframe层自适应

  • layer.iframeSrc(idnex,url)

    • 重新设定iframe的url

  • layer.setTop(layero)

    • 置顶当前窗口

  • layer.full()、layer.min()、layer.restore()

    • 最大最小化和还原

  • layer.prompt(options, yes)

    • 输入层

  • layer.tab({})

    • tab层,弹出一组tab

  • layer.photos(options)

    • 相册层

date:日期选择

• elem(绑定元素)

• type(控件类型选择)

  • year(年)
  • month(年月)
  • date(年月日)
  • time(时间)
  • datetime(时间日期)

• range(范围选择)

  • 默认false

  • range:true

    • 或者range:‘~‘(定义分隔字符)

• format(自定义格式)

  • 例如:yyyy-MM-dd HH:mm:ss
  • 2017-08-18 20:08:08

• value(设置初始值)

  • 默认为:new Date()

  • value:‘2018-08-18‘(必须遵循format设定格式)

  • 例如:value:new Date(153476888000)

  • isInitValue(是否向元素填充初始值)

    • 默认true

• min/max

  • 和value格式一样,遵循format
  • 或者:min:-7,代表七天内,类似格式

• trigger(自定义弹出控件事件)

  • 默认为focus
  • 如果绑定元素为非输入框默认事件为click

• position(控件定位)

  • abolute(绝对定位,始终吸附绑定元素,默认)

  • fixed(固定定位,吸附绑定元素不跟随浏览器滚动)

  • static(静态定位,嵌入指定容器)

  • show(控件默认显示是否在绑定元素区域)

    • 默认false

• ZIndex(层叠顺序)

• showBottom(是否显示底部)

  • 默认true

  • btns(工具按钮)

    • 目前内置可识别
    • btns:[‘clear‘,‘now‘,‘confirm‘]
    • 清除,当前时间,确认

• lang(两种语言版本)

  • 默认:lang:‘cn‘

• theme(主题)

  • default(默认简约)
  • molv(墨绿)

  • 颜色值自定义

  • grid(格子主题)

• calendar(是否显示公历节日)

  • 默认false
  • 国际版true也不会显示

• mark(标注重要日子)

  • mark:{‘0-9-18‘:‘国耻‘}
  • 固定格式
  • 如果年份为0默认每年月份为0默认每月

• 函数

  • ready(空间打开触发回调)

    • 初始时间为参数

  • change(日期切换发生回调)

    • 生成的值
    • 日期时间对象
    • 结束日期时间对象

  • done(点击日期,清空,现在,确定都会触发)

    • 生成的值,日期时间对象,结束的日期时间对象

  • render

    • var insl = laydate.render({elem:‘#test‘})

  • laydate.getEndDate(mounth,year)

    • 获取指定年月最后一天,没有年默认当前

slider:滑块

• elem(绑定属性)

• type(滑块类型)

  • 默认default(水平)
  • vertical(垂直)

• min/max(滑块最小值最大值)

• range(是否开启滑块范围拖拽)

  • 默认false

• value(滑块初始值)

  • 如果开启range需要传入,value:[20,30]

• step(拖动步长)

• showstep(是否显示间断点)

• tips(是否显示文本提示)

• input(是否显示输入框,如果开启range此选项无效)

• height(针对垂直滑块的高度)

• disabled(是否将滑块禁用拖拽)

• theme(主题颜色#自定义)

rate:评分

• elem(绑定元素)
• length(星星的个数,如果是小数向下取整)
• value(初始值)
• theme(主题默认#ffb800可以自定义)
• half(是否可以选择半星)
• text(是否显示对应内容)
• readonly(是否只读)
• choose:function(value){选择星星后触发}

carousel:轮播图

• 相关类

  • layui-carousel(标识一个轮播图容器)
  • carousel-item(这是一个属性,放置轮播内容外面)

• carousel.render

  • elem(绑定元素)

  • width/height(设定轮播器高度宽度像素可以百分比)

  • full(是否全屏轮播,默认否)

  • anim(切换动画方式)

    • default(左右,默认)
    • updown(上下)
    • fade(渐隐渐现)

  • autoplay(是否支持自动切换,默认true)

  • interval(自动切换时间间隔,单位毫秒,不小于800)

  • index:初始条目[0]

  • arrow:切换箭头显示状态

    • hover:悬停显示,默认
    • always:始终显示
    • none:始终不显示

  • indicator:指示器位置

    • inside:容器内部,默认
    • outside:容器外部
    • none:不显示
    • 如果设置了updown此参数无效

  • trigger:指示器的触发事件

laytpl:模板引擎

• {{d.field}}

  • 输出一个普通字符串,不转译html

    • {{d.field}}

• {{=d.field}}

  • 输出普通字段,并且转义HTML

• {{#JavaScript表达式}}

  • 如果想输出一个函数应该{{fun}}

• {{!template!}}

  • 不解析该模板

flow:流加载

• elem:绑定元素
• scrollElem:滚动条所在元素选择
• isAuto:是否自动加载
• end:用于页末显示内容(默认:没有更多了)
• isLazyimg:是否开启图片懒加载,默认false(如果设置,img中的src需要改成lay-src)
• mb:与底部临界距离,默认50,当滚动条产生这个距离触发加载,(只有isAuto:true有效)
• done:function:到达临界点触发回调,两个参数,一个是当前页page,一个是下一页next

util:工具集

• 固定块

  • 语法:util.fixbar(options)

  • bar1:默认false,如果为true则显示第一个(默认图标),如果参数为图标字符,则覆盖默认图标

  • bar2:同上

  • bgcolor:定义区块背景色

  • showHeight:用于控制top按钮滚动高度临界值,默认200

  • css:可以通过重置bar的位置,css:{right:200,bottom:299}

  • click:function()

    • 点击bar的回调,带有一个参数用于区分var
    • 支持类型有:bar1,bar2,top

• 倒计时

  • 语法:util.countdown(endTime,serverTime,calback)

    • endTime:结束时间戳或Date对象

    • serverTime:当前服务器时间戳或者date对象

    • callback:回调函数如果正在倒计时每秒执行一次返回三个参数

      • date

      • serverTime

      • timer

        • 计时器返回的id值,用于clearTimeout

• 其它相关方法

  • util.timeAge(time,onlyDate)

    • 某个时间在当前时间多久前
    • time:时间戳或者日期对象
    • onlyDate:是否在超过30天后,只返回日期
    • 3分钟内:刚刚
    • 30天内:若干分钟小时或者天前
    • 30天以上,返回日期字符

  • util.toDateString(time,format)

    • 转化时间戳或者日期对象为日期格式
    • time:日期对象或者时间戳
    • format:日期格式字符

  • util.digit(num,length)

    • 如果num长度小于length在num前面补0

  • util.escape(str)

    • 转义xss字符

      • str为任意字符

  • util.event(attr,obj,eventType)

    • layactive=‘1‘

      • 元素的属性

    • attr:监听事件元素的属性

    • obj:事件回调,一堆触发函数

    • eventType:事件类型,默认click

code:代码修饰器

• 在pre标签中添加class="layui-code"

• 然后导入模块layui.code()

  • elem:绑定元素

  • title:设定标题

  • height:设置最大高度

  • encode:是否转义HTML标签默认false

  • skin

    • 默认风格

    • skin: ‘notepad‘

      • notepad++

  • about:是否剔除右上角关于

colorpicker:颜色选择器

• 颜色选择器

• elem:绑定元素

• color:默认颜色(支持各种格式)

• format:颜色显示/输入格式,可选,(hex,rgb)

  • 如果rgb开启透明度自动变成rgba,默认颜色黑色

• alpha:是否开启透明度

• predefine:预定义颜色是否开启

• color:预定义颜色,需要predefine配合

• size:下拉框大小

  • lg
  • sm
  • xs

• chang:function:颜色改变回调,参数是颜色

• done:function:点击确认或者清除触发回调,返回当前颜色值

tree:树

• 语法:tree.render()

• elem:绑定元素

• data:数据源

  • title:节点标题
  • id:节点唯一索引
  • field:节点字段名
  • children:子节点,设定选项和父节点一样
  • href:点击节点弹出新窗口对应url,需要开启isJump参数
  • spread:节点是否初始展开,默认false
  • checked:节点是否初始为选中状态,如果开启复选框默认false
  • disabled:节点是否为禁用状态,默认false

• id:设定实例唯一索引,用于基础方法传参使用

• showCheckbox:是否显示复选框

• edit:是否开启节点操作图标,默认false

  • 如果为true按照数组顺序
  • 目前支持edit:[‘add‘,‘update‘,‘del‘]

• accordion:是否启用手风琴模式,默认false

• onlylconControl:如果为true只能点击左侧图标收缩,默认false可以点击节点文本

• isJump:是否允许点击节点弹出新窗口,默认false

• showLine:是否开启连接线,默认true如果不开启左侧会出现三角图标

• text:自定义各类默认文本

• 回调函数

  • click(obj)

    • obj.data:当前节点数据

    • obj.state:当前节点展开状态

      • open
      • close
      • normal

    • obj.elem:当前节点元素

    • obj.data.children:当前节点下是否有子节点

  • oncheck

    • obj.data:节点数据
    • obj.checked:展开状态
    • obj.elem:节点元素

  • operate操作节点回调

    • obj.type:操作类型

      • add
      • edit
      • del

    • obj.data:当前节点数据

    • obj.elem:当前节点元素

  • tree.getChecked(id):获取选中的节点

  • tree.setChecked("id",[2,3,5]):批量勾选节点

transfer:穿梭框

• elem:绑定元素

• title:穿梭框上方标题

• data:数据源

• parseData:用于对数据源进行格式解析

  • 合法格式

    • [{"value":"1","title":"礼拜","disabled":"","checked":""}]

  • 不合法

    • [{"id":"1","name":"李白"}]

  • 解析

    • parseData:function(res){return{"value":res.id}}

• value:初始选中的数据(右侧)

• id:唯一实例索引

• showSearch:是否开启搜索,默认false

• width/height:定义左右穿梭框的宽度/高度

• text:自定义文本

  • 例如:none:‘无数据‘
  • searchNone:‘无匹配数据‘

• onchange:左右数据穿梭时的回调

• 基础方法

  • transfer.set(options);

    • 设定全局默认参数

  • transfer.getData(id);

    • 获取右侧数据

  • transfer.reload(id,options);

    • 重载实例

upload:文件上传

• 文件上传本来只是一个button,upload给它特殊技能

• upload.render()

• elem:绑定元素

• url:服务器上传接口

• data:请求上传接口的额外参数

• headers:接口请求的头

• accept:上传校验文件类型

  • file

    • 文件

  • images

    • 图片

  • video

    • 视频

  • audio

    • 音频

• acceptMinme:规定打开文件选择框时筛选文件类型

• exts:允许上传文件后缀

  • 例如:exts:‘zip\rar\7z‘;

• auto:是否选择完成自动上传,默认true

• bintAction:如果自动上传为false这个用来绑定手动上传按钮

• field:设定文件域或字段名

• size:设置最大上传文件大小,KB

• multiple:是否允许多文件上传,默认false

• number:同上传文件数量

• drag:是否接受拖拽上传文件

• 函数

  • choose():选择文件后的回调函数

  • before():文件提交上传前的回调

  • done():执行上传请求后的回调,三个参数

    • res:服务端响应信息
    • index:当前文件的索引
    • upload:重新上传的方法,一般在上传失败的时候用

  • error():执行上传请求异常回调

laypage:分页

• laypage.render()
• elem:绑定元素
• count:数据总和,一般通过服务端得到
• limit:每页显示条数,默认10
• limits:每页条数选择项,默认array[10,20,30,40,50]
• curr:起始页
• groups:连续出现页码个数,默认5
• prev:自定义上一页内容,支持传入文本或者HTML
• next:自定义下一页
• first:自定义首页
• last:自定义尾页
• layout:自定义排版,默认array[‘prev‘,‘page‘,‘next‘]
• theme:自定义主题可以传入颜色值
• hash:开启location.hash,并自定义hash值
• jump:function:切换分页回调函数

table:表格

• 页面放置一个元素

• elem:绑定元素

• cols:设置表头

  • 值是一个二维数组

  • field:字段名,唯一表示

  • title:设定标题,可以看到的

  • width:设定列宽,不写就自动分配,数字或者百分比

  • minWidth:局部定义当前常规单元格最小宽度,默认60,优先级高于cellMinWidth

  • type:设定列类型

    • normal:常规无需设定
    • checkbox:复选框列
    • radio:单选框列
    • numbers:序号列
    • space:空列

  • LAY_CHECKED:是否全选状态,默认false,开启复选框列有效

  • fixed:固定列冻结

    • left:固定在左
    • right:固定在右
    • 必须放在表头的最前或者最后

  • hide:是否隐藏列,默认false

  • totalRow:是否开启该列的自动合计功能,默认false

  • totalRowText:显示自定义合计文本

  • sort:是否允许排序,默认false,ASCII对比

  • unresize:是否禁止拖拽列宽,默认false

  • edit:单元格编辑类型,默认不开启,目前只支持text(输入框)

  • event:自定义单元格点击事件,可以在tool中完成对单元格的业务处理

  • style:自定义单元格样式,传入css样式

  • align:单元格排列方式

    • left
    • center
    • right

  • colspan:单元格所占列数,默认1,用于多级表头

  • templet:自定义列模板

  • toolbar:绑定工具条模板

• url:异步数据接口

  • url:接口地址默认传递两个参数

    • ?page=1&limi=30
    • page当前页码
    • limit每页数据量

  • method:接口http请求类型,默认get

  • where:接口的其它参数

  • contentType:发送到服务端的内容编码类型

    • 如果你要发送 json 内容，可以设置：contentType: ‘application/json‘

  • header:接口的请求头

  • parseData:数据格式解析回调函数

    • parseData: function(res){ //res 即为原始返回的数据
      return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
      };
      }

  • request:用于对分页请求的参数,pag/limit从新设定名称

  • response:重新设定返回数据格式

• toolbar:开启表格头部工具栏,默认false

  • toolbar:‘#toolbarDemo‘ 指向自定义工具栏模板选择器
  • toolbar:‘
    xxx
    ‘ 直接传入工具栏模板字符
  • toolbar:true 只开启工具栏不显示左侧模板
  • toolbar:‘default‘ 让工具栏左侧显示默认的内置模板

• defaultToolbar:可以自由配置表头工具栏右侧的图标按钮

  • filter:显示筛选图标
  • exports:显示导出图标
  • print:显示打印图标

• width:设定table容器宽度,如果内容超出会出现滚动条

• height:容器高度

  • 默认高度随数据适应
  • 固定值:设定是一个数字,超高出现滚动条
  • full-差值:高度始终铺满,无论浏览器尺寸

• cellMinWidth:全局定义所有常规单元格的最小宽度,默认60

• done:数据渲染完的回调,可以做一些其它操作

• data:直接复制数据,array

• totalRow:是否开启合计行区域

• page:分页默认false

• limit:每页显示的条数

• limits:每页显示条数选择

  • 默认:[10,20,30,....,90]

• loading:是否显示加载条,默认true

• title:定义table的大标题,文件导出用到

• text:自定义文本,如空数据时的异常提示

• autoSort:默认true,直接由table组件在前端自动处理排序

• initSort:初始排序状态,默认按某个字段排序

• id:设定容器唯一id

• skin:设定表格外观尺寸

  • skin

    • line:行边框
    • row:列边框
    • nob:无边框

  • even:是否开启隔行背景,默认false

  • size

    • sm小尺寸
    • lg大尺寸

layui笔记

原文：https://www.cnblogs.com/hwx1999/p/12823142.html