五、核心交互模块详解

Layui的JavaScript模块是其灵魂所在，赋予了静态页面强大的动态交互能力。

5.1 弹出层 Layer
layer被誉为Layui最经典的模块，几乎是弹窗解决方案的首选。它不仅功能强大，而且使用极其简单。在Layui环境中，只需加载模块即可使用，无需单独引入jQuery。

// 基础消息框
layer.msg('操作成功', {icon: 1, time: 2000});

// 不同类型的消息框
layer.msg('操作成功', {icon: 1});   // 成功
layer.msg('操作失败', {icon: 2});   // 失败
layer.msg('警告信息', {icon: 3});   // 警告
layer.msg('提示信息', {icon: 4});   // 提示
layer.msg('加载中', {icon: 16});    // 加载

// 确认框
layer.confirm('确定要删除这条数据吗？', {
  icon: 3,
  title: '提示',
  btn: ['确定', '取消']
}, function(index){
  // 确定后的回调
  layer.close(index);
  // 执行删除操作...
  layer.msg('删除成功');
}, function(index){
  // 取消后的回调
  layer.close(index);
});

// 加载层
var index = layer.load(1, { // 1代表加载风格（0-2）
  shade: [0.3, '#000'] // 遮罩层配置
});
// 模拟异步操作
setTimeout(function(){
  layer.close(index);
  layer.msg('加载完成');
}, 2000);

// 提示层（自动消失）
layer.tips('这是提示内容', '#elementId', {
  tips: [1, '#3595CC'], // 1代表上方，2代表右方，3代表下方，4代表左方
  time: 3000
});

// iframe弹窗（用于编辑或详情）
layer.open({
  type: 2,
  title: '编辑用户',
  area: ['700px', '450px'],
  content: '/page/edit-user?id=123',
  shade: 0.3,
  maxmin: true,      // 允许最大最小化
  end: function(){
    // 关闭后刷新父页面表格
    location.reload();
  }
});

// 全屏弹窗
layer.open({
  type: 2,
  title: '全屏页面',
  area: ['100%', '100%'],
  content: '/page/full-page'
});

// 自定义弹窗内容
layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  shadeClose: true,
  content: '<div style="padding: 30px; text-align: center;">自定义内容</div>'
});

5.2 数据表格 Table
table模块是Layui处理数据展示的核心，支持动态渲染、分页、排序、筛选、行内编辑等复杂功能。

5.2.1 方法渲染（最常用）

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

  table.render({
    elem: '#demo',          // 绑定元素选择器
    url: '/api/data',       // 数据接口
    toolbar: '#toolbarDemo', // 头部工具栏
    defaultToolbar: ['filter', 'exports', 'print'], // 默认工具栏
    title: '用户数据表',
    cols: [[                // 表头配置
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:120, edit: 'text'}
      ,{field: 'email', title: '邮箱', width:200}
      ,{field: 'score', title: '积分', width:80, sort: true}
      ,{field: 'sign', title: '签名', minWidth: 150}
      ,{field: 'createTime', title: '注册时间', width:180, templet: '<div>{
  { layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]],
    page: true,             // 开启分页
    limit: 20,              // 每页显示数量
    limits: [10, 20, 30, 50, 100], // 每页数量下拉选项
    loading: true,          // 加载遮罩
    text: {
      none: '暂无相关数据'   // 空数据提示
    },
    request: {
      pageName: 'pageNum',  // 页码参数名称
      limitName: 'pageSize' // 每页数量参数名称
    },
    response: {
      statusName: 'code',   // 状态字段名称
      statusCode: 0,        // 成功状态码
      msgName: 'msg',       // 消息字段名称
      countName: 'total',   // 数据总数字段名称
      dataName: 'rows'      // 数据列表字段名称
    }
  });
});

5.2.2 数据表格事件监听

// 监听行工具栏（操作按钮）
table.on('tool(test)', function(obj){
  var data = obj.data; // 获得当前行数据
  if(obj.event === 'del'){
    layer.confirm('确定删除？', function(index){
      // 调用删除接口...
      $.ajax({
        url: '/api/delete',
        method: 'POST',
        data: {id: data.id},
        success: function(res){
          if(res.code === 0){
            obj.del(); // 删除当前行
            layer.close(index);
            layer.msg('删除成功');
          }
        }
      });
    });
  } else if(obj.event === 'edit'){
    // 打开编辑弹窗
    layer.open({
      type: 2,
      title: '编辑用户',
      area: ['600px', '400px'],
      content: '/page/edit-user?id=' + data.id,
      end: function(){
        table.reload('demo'); // 刷新表格
      }
    });
  }
});

// 监听行双击事件
table.on('rowDouble(test)', function(obj){
  var data = obj.data;
  layer.msg('双击了：' + data.username);
});

// 监听排序事件
table.on('sort(test)', function(obj){
  console.log(obj.field); // 排序字段
  console.log(obj.type);   // 排序类型（asc/desc）
});

// 监听单元格编辑
table.on('edit(test)', function(obj){
  var value = obj.value;    // 修改后的值
  var data = obj.data;      // 所在行数据
  var field = obj.field;    // 字段名
  // 发送保存请求
  $.post('/api/update', {
    id: data.id,
    field: field,
    value: value
  });
});

// 刷新表格
table.reload('demo', {
  where: { // 额外参数
    keyword: $('#searchInput').val()
  },
  page: { curr: 1 } // 重置到第一页
});

5.3 日期时间选择器 Laydate
laydate模块提供了强大的日期时间选择功能，支持单选、区间选择、自定义格式等。

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

  // 基础日期选择
  laydate.render({
    elem: '#test1'
  });

  // 时间选择器
  laydate.render({
    elem: '#test2',
    type: 'time'
  });

  // 日期时间范围选择
  laydate.render({
    elem: '#test3',
    type: 'datetime',
    range: true
  });

  // 年选择器
  laydate.render({
    elem: '#test4',
    type: 'year',
    format: 'yyyy年'
  });

  // 月选择器
  laydate.render({
    elem: '#test5',
    type: 'month',
    format: 'yyyy-MM'
  });

  // 时间范围选择
  laydate.render({
    elem: '#test6',
    type: 'time',
    range: true
  });

  // 自定义格式
  laydate.render({
    elem: '#test7',
    format: 'yyyy年MM月dd日 HH时mm分ss秒'
  });

  // 设置最小/最大日期
  laydate.render({
    elem: '#test8',
    min: '2024-01-01',
    max: '2024-12-31'
  });

  // 快捷键
  laydate.render({
    elem: '#test9',
    shortcuts: [
      {text: '今天', value: new Date()},
      {text: '昨天', value: function(){ return new Date(new Date().setDate(new Date().getDate()-1)); }},
      {text: '本周', value: function(){ return [new Date(new Date().setDate(new Date().getDate()-new Date().getDay())), new Date()]; }}
    ]
  });

  // 事件监听
  laydate.render({
    elem: '#test10',
    done: function(value, date, endDate){
      console.log('选择了日期：' + value);
    },
    change: function(value, date, endDate){
      console.log('日期变化：' + value);
    }
  });
});

5.4 文件上传 Upload
upload模块提供了丰富的文件上传方案，支持多文件、拖拽上传、图片预览等。

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

  // 单图片上传
  upload.render({
    elem: '#test1'
    ,url: '/api/upload/'
    ,accept: 'image'
    ,acceptMime: 'image/*'
    ,exts: 'jpg|png|gif|jpeg'
    ,size: 2048  // 限制2MB
    ,done: function(res){
      // 上传完毕回调
      if(res.code === 0){
        layer.msg('上传成功');
        $('#demo1').attr('src', res.url);
      } else {
        layer.msg(res.msg);
      }
    }
    ,error: function(){
      layer.msg('上传失败');
    }
    ,before: function(obj){
      // 预读本地文件，实现图片预览
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result);
      });
    }
  });

  // 多文件上传
  upload.render({
    elem: '#test2'
    ,url: '/api/upload/multiple'
    ,multiple: true
    ,number: 5
    ,auto: false  // 手动上传
    ,bindAction: '#uploadBtn'
    ,done: function(res){
      layer.msg('上传成功，共' + res.files.length + '个文件');
    }
  });

  // 拖拽上传
  upload.render({
    elem: '#test3'
    ,url: '/api/upload/'
    ,drag: true
    ,accept: 'images'
  });

  // 剪贴板上传
  upload.render({
    elem: '#test4'
    ,url: '/api/upload/'
    ,size: 10240
    ,accept: 'file'
  });
});

5.5 其他常用模块
5.5.1 分页模块 Laypage

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

  laypage.render({
    elem: 'pageDemo',
    count: 1000,          // 数据总数
    limit: 20,            // 每页显示数量
    limits: [10, 20, 30, 50],
    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
    jump: function(obj, first){
      if(!first){
        // 跳转后刷新数据
        loadData(obj.curr, obj.limit);
      }
    }
  });
});

5.5.2 树形组件 Tree

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

  tree.render({
    elem: '#treeDemo',
    data: [{
      title: '一级菜单',
      children: [
        {title: '二级菜单1', id: 1},
        {title: '二级菜单2', id: 2}
      ]
    }],
    showCheckbox: true,   // 显示复选框
    accordion: true,      // 手风琴模式
    onlyIconControl: false,
    edit: ['add', 'update', 'del'], // 启用编辑
    operate: function(obj){
      // 编辑操作回调
      console.log(obj.event, obj.data);
    },
    click: function(obj){
      console.log('点击了：' + obj.data.title);
    }
  });
});

5.5.3 轮播组件 Carousel

<div class="layui-carousel" id="carouselDemo">
  <div carousel-item>
    <div><img src="/images/1.jpg"></div>
    <div><img src="/images/2.jpg"></div>
    <div><img src="/images/3.jpg"></div>
  </div>
</div>

<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;

  carousel.render({
    elem: '#carouselDemo',
    width: '100%',
    height: '300px',
    arrow: 'always',      // 始终显示箭头
    anim: 'fade',         // 动画效果：fade（淡入淡出）、default（左右滑动）
    autoplay: true,       // 自动切换
    interval: 3000,       // 切换间隔
    indicator: 'inside',  // 指示器位置：inside（内部）、outside（外部）、none（不显示）
    trigger: 'click'      // 切换触发方式
  });
});
</script>

六、最新版本特性（3.0.0-alpha）

2026年3月，Layui迎来了具有里程碑意义的3.0.0-alpha版本。这次更新并非简单的功能迭代，而是对底层基础设施的重构，旨在让Layui融入现代前端生态。
https://tmywi.cn/category/meishi.html
6.1 核心架构升级
ES Module 化：3.0版本彻底放弃了自己独有的轻量级模块系统，全面拥抱ES Module。这意味着Layui现在可以通过import语法直接引入，支持现代浏览器的原生模块化加载。

构建工具升级：从过去单一的Gulp打包，升级为Rollup + Babel + PostCSS的组合式构建流程，提升了代码的标准化和兼容性。

6.2 使用方式的变化
3.0版本提供了三种导入方式，更好地融入不同的开发环境：
浏览器 IIFE 方式：类似2.x版本的使用习惯。
浏览器 ESM 方式：

<script type="module">
  import { layer, form } from 'dist/layui.esm.js';
  layer.msg('Hello ES Module');
</script>

Node 构建环境 ESM 方式：

npm i layui@3.0.0-alpha

import { layer } from 'layui';
layer.msg('Hello Node');

6.3 CSS Variable（CSS变量）支持
3.0版本为组件库添加了CSS Variable支持，这使得重置主题色变得非常简单，无需再经过繁琐的Sass变量编译。

:root {
  /* 修改全局主题色 */
  --lay-color-primary: #16baaa;
  --lay-color-accent: #16b777;
  --lay-color-danger: #ff5722;
  --lay-color-warning: #ffb800;
  --lay-color-success: #5fb878;

  /* 修改圆角 */
  --lay-border-radius: 4px;

  /* 修改字体 */
  --lay-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Layui作为一款“情怀型”前端UI框架，凭借其极低的学习门槛、内置的轻量级模块化规范、丰富的开箱即用组件，在广大后端开发者及中小型项目团队中占据了独特的地位。

虽然在前端工程化大行其道的今天，Layui可能不是构建大型复杂单页面应用的首选，但它在快速构建后台管理系统、内部运营平台、传统企业官网等方面依然具有极高的效率优势。特别是随着3.0版本的发布，Layui正努力向现代化标准靠拢，试图在“返璞归真”与“紧跟时代”之间找到完美的平衡点。
对于开发者而言，掌握Layui不仅能让你快速交付项目，更能让你体会到原生JavaScript开发的那份简单与纯粹。
来源：
https://tmywi.cn/