layui 个人学习总结

有些东西容易忘，一般习惯记线下笔记，查起来也麻烦，还是写成博客吧

此篇用来记录layui个人使用（个人容易遗忘的地方）

持续更新... ...

 

一. 弹层组件文档：layui.layer

1.使用场景：

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景	用前准备	调用方式
1. 作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。	通过script标签引入layer.js后，直接用即可。 参考：快速上手
2. layui 模块化使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js	通过layui.use('layer', callback)加载模块

作为独立组件使用 layer
引入好layer.js后，直接用即可

<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

在layui中使用layer

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

除了上面有所不同，其他都完全一致。

 

2. 基础参数

我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ''})layer.msg('', {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。

注意，从2.3开始，无需通过layer.config来加载拓展模块

type基本层类型：

类型：Number，默认：0

layer提供了5种层类型。

可传入的值有：0（信息框，默认）

1（页面层）

2（iframe层）

3（加载层）

4（tips层）。

若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

 

title标题：

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；

若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；

如果你不想显示标题栏，你可以title: false

 

content内容：

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：