Layui常用内置方法

喜欢ヅ旅行 2023-10-03 11:44 30阅读 0赞

#### Layui常用内置方法 ####

*   *   *  1、layui.use
         *  2、layer.open
         *  3、layer.close
         *  4、layer.closeAll
         *  5、layui.config
         *  6、layer.load

#### 1、layui.use ####

> 加载模块  
> 方法：layui.use(\[mods\], callback)

参数 mods：如果填写，必须是一个 layui 合法的模块名（不能包含目录）。  
从 layui 2.6 开始，若 mods 不填，只传一个 callback 参数，则表示引用所有内置模块。  
参数 callback：即为模块加载完毕的回调函数。  
从 layui 2.6 开始，该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。

//引用指定模块
    lay.use(['jquery', 'layer', 'element', 'upload', 'laytpl', 'util', 'contextMenu', 'form', 'dtree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var util = layui.util;
        var contextMenu = layui.contextMenu;
        var form = layui.form;
        var dtree = layui.dtree;
        
      });

//引用所有模块（layui 2.6 开始支持）
    layui.use(function(){
    ...
    });

//通过回调的参数得到模块对象
    layui.use(['layer', 'laydate', 'table'], function(layer, laydate, table){ 
      //使用 layer
      layer.msg('test');
      
      //使用 laydate
      laydate.render({});  
      
      //使用 table
      table.render({})
    });

#### 2、layer.open ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70]

#### 3、layer.close ####

*  当你想关闭当前页的某个层时

var index = layer.open();
    var index = layer.alert();
    var index = layer.load();
    var index = layer.tips();

*  正如你看到的，每一种弹层调用方式，都会返回一个index

layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可

*  如果你想关闭最新弹出的层，直接获取layer.index即可

layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

*  当你在iframe页面关闭自身时

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭

#### 4、layer.closeAll ####

> 如果不想去获取index你只想关闭,那么可以使用closeAll。如果不指向层类型的话，它会销毁掉当前页所有的layer层。当然，如果只想关闭某个类型的层，那么可以:

*  layer.closeAll();//疯狂模式，关闭所有层
 *  layer.closeAll(‘dialog’); //关闭信息框
 *  layer.closeAll(‘page’);//关闭所有页面层
 *  layer.closeAll(‘iframe’);//关闭所有的iframe层
 *  layer.closeAll(‘loading’);//关闭加载层
 *  layer.closeAll(‘tips’);//关闭所有的tips层

#### 5、layui.config ####

> 全局配置  
> 方法：layui.config(options)  
> 在使用模块之前，全局化配置一些参数

layui.config({
      dir: '/res/layui/' //layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视
      ,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
      ,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
      ,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
    });

#### 6、layer.load ####

layer 自带三种加载样式，根据传入的值（0~2）自动改变，如果是 0 的话可以不用传。  
![在这里插入图片描述][e5c15b54ad51443194fe9821c5d3cfb0.png]

*  样式1

layer.load();

*  样式2

layer.load(1);

*  样式3

layer.load(2);

*  2秒钟后自动关闭

layer.load(0, {time: 2*1000});

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/214a3851cde94c0e9dbbf565f9a062cc.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[e5c15b54ad51443194fe9821c5d3cfb0.png]: https://img-blog.csdnimg.cn/e5c15b54ad51443194fe9821c5d3cfb0.png