Layui 常用语法与示例

基础：样式靠class，交互js在layui.use()中编写

1. 栅格布局（12等分）

layui-row 代表一行；layui-col-mdN 代表占N份，md代表PC大屏。

<div class="layui-row">
    <div class="layui-col-md4">占1/3宽度</div>
    <div class="layui-col-md8">占2/3宽度</div>
</div>

2. 按钮

class 控制样式

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-danger">删除按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>

3. layer弹窗模块（最常用）

layui.use(function(){
  var layer = layui.layer;
  // 消息提示
  layer.msg('提示文字');
  // 确认弹窗
  layer.confirm('确定删除吗？', function(index){
    layer.msg('确认成功');
    layer.close(index); //关闭弹窗
  });
  // 普通弹窗
  layer.open({
    title:'弹窗标题',
    content:'弹窗内容'
  });
})

4. form表单组件

必须给form加上 class="layui-form"，内部表单元素自动美化

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
    </div>
  </div>
</form>

JS监听表单提交事件

layui.use(function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    console.log(data.field); //获取表单所有提交数据
    return false; //阻止表单默认提交
  });
})

5. laydate 日期选择器

<input type="text" id="date" class="layui-input">
<script>
layui.use(function(){
  var laydate = layui.laydate;
  laydate.render({
    elem: '#date' //绑定元素id
  });
})
</script>

6. table 数据表格（后端列表常用）

静态表格（前端直接写死数据）

<table class="layui-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
    </tr>
  </tbody>
</table>

JS渲染动态表格（重点，对接后端接口）

<table id="userTable"></table>
<script>
layui.use(function(){
  var table = layui.table;
  table.render({
    elem:'#userTable',
    cols:[[
      {field:'id',title:'ID'},
      {field:'name',title:'姓名'}
    ]],
    data:[{id:1,name:"张三"},{id:2,name:"李四"}]
  })
})
</script>

7. 卡片面板

<div class="layui-card">
  <div class="layui-card-header">卡片标题</div>
  <div class="layui-card-body">卡片内容</div>
</div>

8. 提示标签

<span class="layui-badge">数字</span>
<span class="layui-badge layui-bg-red">红色标记</span>

9. 分页组件

<div id="page"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  laypage.render({
    elem:'page',
    count:100, //总数据条数
    limit:10,  //每页条数
    curr:1
  })
})
</script>