Layuiadmin：全能型前端框架

Layuiadmin是基于LayUI框架的前端UI开发框架，同时也是一款全能型前端框架。

一、特点简述

Layuiadmin有着以下几个特点：

1、易于上手：Layuiadmin提供了完整的文档和示例代码，用户可以快速上手。

2、轻量级：Layuiadmin的代码量很小，压缩后只有100多KB，可以快速加载。

3、模块化：Layuiadmin采用模块化开发，代码易于维护和扩展。

4、丰富的UI组件：Layuiadmin提供了丰富的UI组件，可以快速构建各种复杂的前端页面。

5、响应式布局：Layuiadmin支持响应式布局，在不同设备上都能保持良好的显示效果。

二、UI组件丰富

Layuiadmin提供了丰富的UI组件，可用于构建各种复杂的前端页面。

1、表格

  <table class="layui-hide" id="test" lay-filter="test">
      <thead>
          <tr>
              <th lay-data="{field:'id',type:'checkbox'}"></th>
              <th lay-data="{field:'id', width:80, sort: true}">ID</th>
              <th lay-data="{field:'username', width:80}">用户名</th>
              <th lay-data="{field:'email', minWidth:150}">邮箱</th>
              <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
              <th lay-data="{field:'city', width:80}">城市</th>
              <th lay-data="{field:'sign'}">签名</th>
              <th lay-data="{field:'experience', sort: true, width:80}">积分</th>
              <th lay-data="{field:'dead', width:180}">修改时间</th>
              <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
          </tr>
      </thead>
  </table>

2、表单

  <div class="layui-form-item">
      <label class="layui-form-label">标题</label>
      <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
  </div>

3、弹出层

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

三、模块化开发

Layuiadmin采用模块化开发，代码易于维护和扩展。

1、定义模块

  layui.define(function(exports){
      //模块代码
      exports('module_name', function(){ //暴露模块接口
          //接口代码
      });
  });

2、引用模块

  layui.use(['module_name'], function(moduleName){
      var module = layui.module_name();
      //调用模块接口
  });

四、响应式布局

Layuiadmin支持响应式布局，在不同设备上都能保持良好的显示效果。

1、定义容器

  <div class="layui-container">
      <div class="layui-row">
          <div class="layui-col-md4"></div>
          <div class="layui-col-md4"></div>
          <div class="layui-col-md4"></div>
      </div>
  </div>

2、设置列宽

  <div class="layui-col-md3"></div>
  <div class="layui-col-md6"></div>
  <div class="layui-col-md3"></div>

五、完整代码示例

以下为一个完整的Layuiadmin页面的示例代码：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Layuiadmin</title>
      <link rel="stylesheet" href="/layui/css/layui.css">
  </head>
  <body>
      <div class="layui-container">
          <div class="layui-row">
              <div class="layui-col-md4"></div>
              <div class="layui-col-md4"></div>
              <div class="layui-col-md4"></div>
          </div>
      </div>
      <table class="layui-hide" id="test" lay-filter="test">
          <thead>
              <tr>
                  <th lay-data="{field:'id',type:'checkbox'}"></th>
                  <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                  <th lay-data="{field:'username', width:80}">用户名</th>
                  <th lay-data="{field:'email', minWidth:150}">邮箱</th>
                  <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
                  <th lay-data="{field:'city', width:80}">城市</th>
                  <th lay-data="{field:'sign'}">签名</th>
                  <th lay-data="{field:'experience', sort: true, width:80}">积分</th>
                  <th lay-data="{field:'dead', width:180}">修改时间</th>
                  <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
              </tr>
          </thead>
      </table>
      <form class="layui-form">
          <div class="layui-form-item">
              <label class="layui-form-label">标题</label>
              <div class="layui-input-block">
                  <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
          </div>
      </form>
      <script src="/layui/layui.js"></script>
      <script>
          layui.use(['table', 'form'], function(){
              var table = layui.table;
              var form = layui.form;
              //渲染表格
              table.render({
                  elem: '#test',
                  url: '/demo/table/user/',
                  page: true,
                  cols: [[
                      {type:'checkbox'},
                      {field:'id', width:80, title: 'ID', sort: true},
                      {field:'username', width:80, title: '用户名'},
                      {field:'email', minWidth:150, title: '邮箱'},
                      {field:'sex', width:80, title: '性别', sort: true},
                      {field:'city', width:80, title: '城市'},
                      {field:'sign', title: '签名'},
                      {field:'experience', width: 80, title: '积分', sort: true},
                      {field:'dead', title: '修改时间', width: 180},
                      {fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
                  ]]
              });
              //监听提交
              form.on('submit(formDemo)', function(data){
                  layer.msg(JSON.stringify(data.field));
                  return false;
              });
          });
      </script>
  </body>
  </html>

原创文章，作者：RAAFJ，如若转载，请注明出处：https://www.506064.com/n/368544.html