Layui使用方法总结

Layui前端框架概述

layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。使用方法十分简单，只需引用相关控件，即可直接编写和使用。

准备工作

1.直接百度打开layui官网首页即可下载最新的layui框架。

2.将下载好的layui组件直接放到项目中，在页面中引用即可。

	  <link rel="stylesheet" href="layui/css/layui.css">
	  <script src="layui/layui.js"></script>

类名使用（后期在使用中会补充完整）

类名	作用
layui-main	用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline	用于将标签设为内联块状元素
layui-box	用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing
layui-disabled	用于设置元素不可点击状态（自带样式）
layui-input	使其独占一行
layui-anim	类似于调用，要想使用动画效果必须加此属性名
layui-progress	类似于调用，要想使用进度条效果必须加此属性名
layui-btn	类似于调用，要想使用按钮效果必须加此属性名

时间选择器

1.在页面中定义一个需要使用时间选择器的元素，并且添加一个id属性。

2.js中在layui.use中来调用时间控件，在ladate.render中来填写选择器的相应属性和方法。

layui.use('laydate', function(){
var laydate = layui.laydate;
    laydate.render({

  });
});

3.选择器的属性

属性名	作用	示例	属性值
elem	绑定元素	elem: ‘#test1’	页面元素的class或者id
type	控制时间选择器的时间精确程度	type: ‘year’	year、month、date（默认值）、time、datetime
range	控制是否启用范围选择（会出现两个选择框）；当直接自定义分隔符时，自动开启范围选择	range: true	true、false（默认）、‘分隔符’
format	格式化时间	format:‘yyyy年MM月dd日’	Y、y、M、m、D、d、H、h、s
value	设置初始值	value: ‘2018-08-18’	与format格式对应的时间、new Date(时间戳)
isInitValue	和value配合使用，控制是否向页面元素中填充初始值	isInitValue: false	true、false（默认）
min/max	设置可选择的时间区间	min: ‘1900-01-01’	字符串、整数（正负均可）
zIndex	防止被其他元素遮盖	zIndex:9999999	整数
showBottom	控制是否显示选择器的底部栏	showBottom:false	true、false
btns	选择器下方的按钮	btns: [‘clear’, ‘confirm’]	clear（默认值）、now（默认值）、confirm（默认值）
lang	控制时间选择器的语言	lang: ‘en’	cn（默认值）、en
theme	设置选择器的主题样式	theme: ‘#34D24’	default（默认简约主题）、molv（墨绿）、#颜色值（自定义）、grid（格子主题）
calendar	控制是否显示公历节日	calendar: true	true、false（默认）

树形组件

1.在页面中定义一个需要使用树形组件的元素，并且添加一个id属性。

2.js中在layui.use中来调用时间控件，在ladate.render中来填写选择器的相应属性和方法。

layui.use('tree', function(){
var tree = layui.tree;
    tree.render({

  });
});

3.树形组件的属性

属性名	作用	示例	属性值
elem	绑定元素	elem: ‘#test1’	页面元素的class或者id
date	数据内容		详见下方数据源表
id	设置唯一标识，用于传参	id: ‘demoId’	id名
showCheckbox	是否显示复选框	showCheckbox: true,	true、false（默认）
edit	是否开启节点操作	edit: [‘add’, ‘update’, ‘del’]	true（只显示改删图标）、false（默认）、 [‘add’, ‘update’, ‘del’]
accordion	是否开启手风琴模式	accordion: true	true、false（默认）
onlyIconControl	控制点击图标还是节点本身触发收缩 ，true只能点击图标，false点击图标和节点本身均可	onlyIconControl:true	true、false（默认）
showLine	是否开启连接线	showLine:false	true（默认）、false

4.数据源表

属性名	作用	示例	属性值
title	节点标题	title: ‘标题’,	标题内容
id	节点的唯一标识，用于操作单个节点	id:id1,	id名
field	节点的字段名称	field: ‘name’	字段名
children	子节点（属性同父节点一样）	[{title: ‘子节点1’, id: ‘111’}]	参考两个表
spread	节点是否初始化时展开	spread:true,	true、false（默认）
checked	节点是否被默认选中（前提开启复选框功能）	checked:false,	true、false（默认）
disabled	节点是否被禁用	disabled:false,	true、false（默认）

5.获取选中节点的数据

var checkData = tree.getChecked('demoId');

6.动态勾选节点

tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点

7.组件重载（覆盖之前的属性并重新加载）

tree.reload('demoId', {
  //新的参数
});

进度条

1.HTML代码（必须用这种div嵌套写法）

2.js代码

//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});

3.属性

属性名	作用	示例	属性值
lay-showPercent	是否显示进度条比例文本，如果不需要显示去掉属性即可	lay-showPercent=“true”	true、yes
lay-percent	控制进度条的比例	lay-percent=“30%”	true、yes

4.样式

在内层的div中设置进度条背景颜色

在外层的div中设置进度条的大小

按钮

1.使用方法

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

2.按钮的class属性值

类名	效果
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-fluid	流体按钮（最大化适应）
layui-btn-radius	圆角按钮

3.图标


//也可以使用这种方式

具体图标样式参考https://www.layui.com/doc/element/icon.html

弹出框

1.使用方法
此处有两种使用的方法，如果作为独立组件使用，需要在layer独立版本的官网下载组件，并引入jquery和layer.js，在js中直接使用即可。

layer.msg('title', {icon: 0, time: 1000 * 60 * 60 * 24, shade: 0.3});

如果使用的layui，无需做其他操作，只引入 layui.css和layui.js，在layui.use中使用。

layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
});    

2.基础参数
type

用来设置弹出框类型
属性值：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
若采用layer.open方式调用，则type为必填项（信息框除外）

layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});

title

title支持三种类型的值：
若传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；
若需要自定义标题区域样式，title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；
如果不需要显示标题栏，title: false

skin

支持自己创建样式或者使用内置样式 layui-layer-lan、layui-layer-molv

area

在默认状态下，layer是宽高都自适应的，也可以根据需求自定义 area: [‘width’, ‘height’]

offset

属性值
offset: ‘auto’	默认坐标，即垂直水平居中
offset: ‘100px’	只定义top坐标，水平保持居中
offset: [‘100px’, ‘50px’]	同时定义top、left坐标
offset: ‘t’	快捷设置顶部坐标
offset: ‘r’	快捷设置右边缘坐标
offset: ‘b’	快捷设置底部坐标
offset: ‘lt’	快捷设置左上角
offset: ‘lb’	快捷设置左下角
offset: ‘rt’	快捷设置右上角
offset: ‘rb’	快捷设置右下角

layer.msg("skin的测试", { time: 9000, offset: ['100px', '50px']});
//或者
layer.open({
  type: 1, 
  offset:'t',
  content: '传入任意的文本或html' 
});

icon

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6，如果是加载层，可以传入0-2。

layer.msg('content, {icon: 5});

btn

btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当然，可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。

        layer.confirm(confirm, {
            icon: 3, btn: ['是', '否'], yes: function (index) {
                    seccessMsg = "请示成功！";
                    url = "${ctx}/projectFirstReview/noticeDirectorApprove";
                    approvalBtn(url, reviewTaskId, auditLevel, reviewTaskSubId, o, msg,  seccessMsg);
            }, btn2: function (index) {
                layer.close(index);
            }
        });

layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

id

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

anim

目前anim可支持的动画类型有0-6。 如果不想显示动画，设置 anim: -1 即可

属性值	效果
0	平滑放大（默认）
1	从上掉落
2	从底部往上滑
3	从左滑入
4	从左翻滚
5	渐显
6	抖动

还有其他属性后续更新…

数据表格

1.使用方法

HTML代码

Js代码

var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
});

表头参数

参数	作用	参数值
field	设置字段名
title	设置标题
minWidth	设置最小宽度
type	设置列类型	checkbox（复选框）、radio（单选框）、numbers（序号）、space（空列）
LAY_CHECKED	控制是否为全选状态，必须设置复选框才能生效	true、false（默认）
fixed	控制对应列固定住，不会随滚动条移动。必须放在最左或者最右	left、right
totalRow	是否开启该列的合计功能	true、false（默认）
totalRowText	设置合计的文本内容	“合计:”
sort	是否开启排序功能，按照ASCII表排序	true、false（默认）

CSS动画

1.使用方法

使用方法非常简单，只需要在页面中定义div元素即可

2.属性值

属性名	作用
layui-anim	类似于调用，要想使用动画效果必须加此属性名
layui-anim-up	从最底部往上滑入
layui-anim-upbit	微微往上滑入
layui-anim-scale	平滑放大
layui-anim-scaleSpring	弹簧式放大
layui-anim-fadein	渐现
layui-anim-fadeout	渐隐
layui-anim-rotate	360度旋转
layui-anim-loop	添加此属性可循环动画直至再次点击

滑块

1.使用方法

html代码

js代码

layui.use('slider', function(){
  var slider = layui.slider;
  //渲染
  slider.render({
    elem: '#slideTest'  //根据id绑定指定元素
  });
});

2.属性

属性名	作用	示例	属性值
elem	绑定指定元素	elem: ‘#slideTest’
type	设置滑块为竖向还是横向	type: ‘vertical’	default(默认，横向)、vertical(竖向)
height	设置滑块高度，需将滑块设置为竖向才可生效	height:150	默认为200
min	设置滑块最小值	min:10	默认为0
max	设置滑块最大值	max:1000	默认为100
range	设置滑块是否开启范围选择	range: true	false(默认)、true
value	设置滑块初始值，若开启范围选择则需要设置值为数组	value: 20、value:[10,50]
step	设置滑块拖动一次的值( 步长)	step:10	默认为1
showstep	设置滑块在每个值的位置放置一个间断点	showstep:true	false(默认)、true
tips	设置滑块是否显示文字提示(也可以设置自定义文字提示，详见下方代码)	showstep:false	false、true(默认)
showstep	设置滑块在每个值的位置放置一个间断点	showstep:true	false(默认)、true
input	设置滑块是否显示输入框，若显示，则可在输入框设置数字并回车即可操作滑块，同时滑块滑动input的值也随之变化	showstep:true	false(默认)、true
disabled	设置滑块是否可以滑动	disabled:true	false(默认),true

自定义提示文本写法

  slider.render({
    elem: '#slideTest12',
    setTips: function(value){ //自定义提示文本
     return value + '%';
    }
  });