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属性。

<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">

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属性。

<div id="test1"></div>

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（默认