适合后端开发者的前端样式框架LayUI笔记_飞道的博客

适合后端开发者的前端样式框架LayUI笔记

2021-01-01 18:10 494人阅读评论(0)

哔哩哔哩学习链接：倜傥的雷哥的LayUI学习视频

1. 图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

LayUi官网图标文档：https://www.layui.com/doc/element/icon.html

方法1：字符实体

<!-- 方法1：字符实体(必须在容器标签内) -->
<div class="layui-icon" style="color: red;">&#xe68f;</div>

方法2：使用样式

<!-- 方法2：使用样式 -->
<i class="layui-icon layui-icon-heart-fill" style="color: green;"></i>

2. 按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

LayUi官网按钮文档：https://www.layui.com/doc/element/button.html

颜色样式：

<button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮</button>

<button type="button" type="button" class="layui-btn">默认按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-danger">警告按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>

按钮尺寸：

<button type="button" type="button" class="layui-btn layui-btn-lg">大型按钮</button>
    
<button type="button" type="button" class="layui-btn">默认按钮</button>
    
<button type="button" type="button" class="layui-btn layui-btn-sm">小型按钮</button>
    
<button type="button" type="button" class="layui-btn layui-btn-xs">迷你按钮</button>

图标按钮：

<button type="button" class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加</button>

<button type="button" class="layui-btn"><i class="layui-icon">&#x1002;</i></button>

圆角按钮：

<button type="button" class="layui-btn layui-btn-radius layui-btn-primary">原始按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">暖色按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-danger">警告按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-disabled">禁用按钮</button>

按钮组：

<div class="layui-btn-group">
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe602;</i>
    </button>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
</div>

3. 导航栏菜单

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

LayUi官网导航文档：https://www.layui.com/doc/element/nav.html

导航栏方向(水平)：

默认水平

<!-- 水平导航 -->
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
    <!-- 头像菜单项 -->
    <li class="layui-nav-item" style="float: right;">
        <a href=""><img src="https://t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">修改信息</a></dd>
          <dd><a href="javascript:;">安全管理</a></dd>
          <dd><a href="javascript:;">退了</a></dd>
        </dl>
     </li>
</ul>

导航栏方向(垂直):

layui-nav-tree

<!-- 垂直导航 -->
<ul class="layui-nav layui-nav-tree" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script src="../layui/layui.js"></script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
    
        var element = layui.element;

        //…
    });
</script>

导航栏内容：

layui-nav：表示导航栏菜单
- layui-nav-item：表示导航菜单的一个子项
  - layui-nav-child：表示子项的子项
- layui-this：表示当前选中的菜单项

4. 选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

LayUI官网选项卡文档：https://www.layui.com/doc/element/tab.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVJGDL4h-1603016498708)(D:\Note\笔记\前端\LayUI笔记.assets\image-20201015144141259.png)]

默认风格：

layui-tab

<!-- 默认风格 -->
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
    
        var element = layui.element;

        //…
    });
</script>

简介风格：

layui-tab layui-tab-brief

<!-- 简洁风格 -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
    
        var element = layui.element;

        //…
    });
</script>

卡片风格：

layui-tab layui-tab-card

<!-- 卡片风格 -->
<!-- lay-allowclose="true":卡片选项可关闭 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true">
    <ul class="layui-tab-title">
      <li class="layui-this">网站设置</li>
      <li>用户管理</li>
      <li>权限分配</li>
      <li>商品管理</li>
      <li>订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">1</div>
      <div class="layui-tab-item">2</div>
      <div class="layui-tab-item">3</div>
      <div class="layui-tab-item">4</div>
      <div class="layui-tab-item">5</div>
      <div class="layui-tab-item">6</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
    
        var element = layui.element;

        //…
    });
</script>

选项卡内容：

layui-tab：代表一个选项卡
- layui-tab-title：代表选项卡标题
  - layui-this：代表选中当前标题
  - layui-tab-content：代表选项卡中的内容
    - layui-tab-item：代表选项卡对应标题下的内容
    - layui-show：显示选中标题下的内容

选项卡特殊属性：

<!-- lay-allowclose="true":卡片选项可关闭 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true">

5. 进度条(略)

6. 面板 + 布局(重点)

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等。

layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。

依赖加载组件：element

LayUI官网面板文档：https://www.layui.com/doc/element/tab.html

LayUI官网布局文档：https://www.layui.com/doc/element/layout.html

面板：

卡片面板

layui-card：代表一个卡片面板
- layui-card-header：代表卡片面板头部
- layui-card-body：代表卡片面板内容

折叠面板(默认)

layui-collapse：代表一个折叠面板
- layui-colla-item：代表一个折叠面板的内容项
  - layui-colla-title：代表内容项的标题
  - layui-colla-content：代表内容项的内容
  - layui-show：代表内容项默认展开

手风琴面板

在普通折叠面板的基础上加上lay-accordion 属。

手风琴和普通折叠面板的区别是，前者一次只能打开一个面板，后者可以打开多个面板

布局：

布局属性

layui-row
- layui-col-space15 代表列之间的间距，距离范围： space0-space30
  - layui-col-md6 代表一列 md1-md12 代表当前列占整行的x/12
    - layui-col-md-offset3 代表列的偏移

列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

例如：

<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
	移动：6/12 | 平板：6/12 | 桌面：4/12
</div>

实例：

<div class="layui-row layui-col-space30">
    <div class="layui-col-md6" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md6" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 折叠面板 -->
        <div class="layui-collapse">
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">杜甫</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">李清照</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">鲁迅</h2>
              <div class="layui-colla-content layui-show">内容区域</div>
            </div>
          </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 手风琴面板 -->
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">杜甫</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">李清照</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">鲁迅</h2>
              <div class="layui-colla-content layui-show">内容区域</div>
            </div>
          </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
    
        var element = layui.element;

        //…
    });
</script>

7. 徽章(略)

8.时间线(直接看demo)

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>

9.动画(略)

layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）

LayUI官网动画文档：https://www.layui.com/doc/element/anim.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图标01</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/css/layui.global.css">
  <style>
    .site-doc-icon li {
    
      width: 222px;
    }

    .site-doc-icon li .layui-anim {
    
      width: 150px;
      height: 150px;
      line-height: 150px;
      margin: 0 auto 10px;
      text-align: center;
      background-color: #009688;
      cursor: pointer;
      color: #fff;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <br>
  <br>
  <br>
  <ul class="site-doc-icon site-doc-anim">
    <li>
      <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
      <div class="code">layui-anim-up</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
      <div class="code">layui-anim-upbit</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
      <div class="code">layui-anim-scale</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
      <div class="code">layui-anim-scaleSpring</div>
    </li>
  </ul>
  <ul class="site-doc-icon site-doc-anim">
    <li>
      <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
      <div class="code">layui-anim-fadein</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
      <div class="code">layui-anim-fadeout</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
      <div class="code">layui-anim-rotate</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
      <div class="code">追加：layui-anim-loop</div>
    </li>
  </ul>
</body>
</html>
<script src="../layui/layui.js"></script>
<script>
  layui.use('jquery', function () {
    
    var $ = layui.$;

    //演示动画
    $('.site-doc-icon .layui-anim').on('click', function () {
    
      var othis = $(this), anim = othis.data('anim');

      //停止循环
      if (othis.hasClass('layui-anim-loop')) {
    
        return othis.removeClass(anim);
      }

      othis.removeClass(anim);

      setTimeout(function () {
    
        othis.addClass(anim);
      });
      //恢复渐隐
      if (anim === 'layui-anim-fadeout') {
    
        setTimeout(function () {
    
          othis.removeClass(anim);
        }, 1300);
      }
    });
  });
</script>

10. 颜色选择器(略)

官网案例地址：https://www.layui.com/demo/colorpicker.html

11. 滑块(略)

官网案例地址：https://www.layui.com/demo/slider.html

12. 评分(略)

官网案例地址：https://www.layui.com/demo/rate.html

13. 轮播

官网案例地址：https://www.layui.com/demo/carousel.html

案例：

<body>
    <br>
    <br>
    <br>
    <div class="layui-carousel" id="test" lay-filter="test4" style="">
        <div carousel-item="">
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
        </div>
    </div>
    <br>
    <br>
</body>

</html>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'carousel'], function () {
    
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var element = layui.element;
        //图片轮播
        carousel.render({
    
            elem: '#test'
            , width: '100%'
            , height: '400px'
            , interval: 3000
        });
    });
</script>

14. 代码修饰器(略)

15. 时间和日期选择器(略)

16. 表单及其元素 (from/input/select)

官网demo：https://www.layui.com/demo/form.html

直接看demo 就能上手。

17. 弹出层(重点)

LayUI官方文档：https://www.layui.com/doc/modules/layer.html

弹框：

layer.alert()
提示框(可加图标)
layer.confirm()
确认框
layer.prompt()
输入框
layer.tab()
选项卡弹框
layer.photos(options)
相册层弹框
layer.msg
弱弱的提示框
layer.tips
吸附提示框(可控制上下左右方位，前提必须外边框足够大)
layer.open(options)
原始弹框的核心方法

示例：

 <br>
 <button type="button" id="btn1" class="layui-btn">alert</button>
 <button type="button" id="btn2" class="layui-btn">confirm</button>
 <button type="button" id="btn3" class="layui-btn">prompt</button>
 <button type="button" id="btn4" class="layui-btn">tab</button>
 <button type="button" id="btn5" class="layui-btn">photos</button>
 <button type="button" id="btn6" class="layui-btn">msg</button>
 <br><br><br>
 <div style="width: 200px;height: 200px;">
     <button type="button" id="btn7" class="layui-btn">tips</button>
 </div>
 <br>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'carousel', 'layer'], function () {
    
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var element = layui.element;
        var layer = layui.layer;

        //alert
        $("#btn1").click(function () {
    
            layer.alert("只是简单的提示框！");
            layer.alert("加个图标的提示框", {
     icon: 6 });
            // 图标分为1-7
            // 如果还想执行yes回调,可以放第三个参数
        })

        //confirm
        $("#btn2").click(function () {
    
            layer.confirm("你确定要退出吗？", {
     icon: 3, title: '提示' }, function (index) {
    
                alert("你选择了确定")
                layui.close(index);
            });
        })

        //prompt
        $("#btn3").click(function () {
    
            layer.prompt({
    
                formType: 2,
                value: '初始值',
                title: '请输入值',
                area: ['200px', '100px'] //自定义文本域宽高
            }, function (value, index, elem) {
    
                alert(value); //得到value
                layer.close(index);
            });
        })

        //tab
        $("#btn4").click(function () {
    
            layer.tab({
    
                area: ['600px', '300px'],
                tab: [{
    
                    title: 'TAB1',
                    content: '内容1'
                }, {
    
                    title: 'TAB2',
                    content: '内容2'
                }, {
    
                    title: 'TAB3',
                    content: '内容3'
                }]
            });
        })

        //photos
        $("#btn5").click(function () {
    
            layer.photos("只是简单的提示框！");
        })

        //msg
        $("#btn6").click(function () {
    
            layer.msg("弱弱的提示框！");
            layer.msg("带图标的弱弱的提示框！",{
    icon:6});
        })

        //tips
        $("#btn7").click(function () {
    
            layer.tips("简单的吸附提示框！",'#btn7',{
    tips:1});
        })
    });
</script>

layer.open()基础参数：

title - 标题：类型：String/Array/Boolean，默认：‘信息’

title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

content - 内容：类型：String/DOM/Array，默认：’’

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

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

skin - 样式类名：类型：String，默认：’’

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lan**layui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

//单个使用
layer.open({
  skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
  skin: 'demo-class'
})
//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。

area - 宽高：类型：String/Array，默认：‘auto’

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

offset - 坐标：

类型：String/Array，默认：垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

值	备注
offset: ‘auto’	默认坐标，即垂直水平居中
offset: ‘100px’	只定义top坐标，水平保持居中
offset: [‘100px’, ‘50px’]	同时定义top、left坐标
offset: ‘t’	快捷设置顶部坐标
offset: ‘r’	快捷设置右边缘坐标
offset: ‘b’	快捷设置底部坐标
offset: ‘l’	快捷设置左边缘坐标
offset: ‘lt’	快捷设置左上角
offset: ‘lb’	快捷设置左下角
offset: ‘rt’	快捷设置右上角
offset: ‘rb’	快捷设置右下角

icon - 图标：信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
```
//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
```
time - 自动关闭所需毫秒：类型：Number，默认：0

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

anim - 弹出动画：类型：Number，默认：0

我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

值	备注
anim: 0	平滑放大。默认
anim: 1	从上掉落
anim: 2	从最底部往上滑入
anim: 3	从左滑入
anim: 4	从左翻滚
anim: 5	渐显
anim: 6	抖动

type - 基本层类型：类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用*layer.open({type: 1})*方式调用，则type为必填项（信息框除外）

注意弹框也可以用来做表单提交，类似于bootstrap的模态框，其有专门的请求提交类型method:‘post’ 以及回调函数success:function(),这里可以看下面这篇博客自行了解：

LayUI弹出层表单提交参考demo

18. 数据表格(重点)

LayUI的数据表格可以通过拿到后端回调的json字符串，直接渲染到表格中，并自带分页功能，从而节约了后端分页的负担！
为方便测试，这里我采用LayUI 官方提供的json串接口：
https://www.layui.com/demo/table/user/

接下来进行表格数据渲染：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <br>
    <br>
    <table class="layui-table" id="userTable" lay-filter="userTable"></table>
</body>

</html>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['table'], function () {
    
        var $ = layui.jquery;
        var table = layui.table;

        // 渲染数据表格
        table.render({
    
            elem: '#userTable'
            // 请求的json返回接口，因为直接访问存在跨域问题
            // 这里我建议在后端配置跨域或者自定义提供json串的接口
            , url: 'http://www.layui.com/demo/table/user/'
            // ,title:"用户数据表"//导出数据表格时的标题
            , cols: [[// 数据表格中的内容
                {
     field: 'id', width: 80, title: 'ID', sort: true }
                , {
     field: 'username', width: 80, title: '用户名' }
                , {
     field: 'sex', width: 80, title: '性别', sort: true }
                , {
     field: 'city', width: 80, title: '城市' }
                , {
     field: 'sign', title: '签名', minWidth: 150 }
                , {
     field: 'experience', width: 80, title: '积分', sort: true }
                , {
     field: 'score', width: 80, title: '评分', sort: true }
                , {
     field: 'classify', width: 80, title: '职业' }
                , {
     field: 'wealth', width: 135, title: '财富', sort: true }
            ]]
            , page: true// 分页开启
        });
    });
</script>

效果展示：
(自带分页真的很方便，比我每次花时间写后端的分页逻辑便捷多了，与其用mybatisPlus的分页插件pageHelper不如直接在前端处理分页，强烈建议根据官网文档自学一下！)
官网demo链接：https://www.layui.com/demo/table.html
官网文档链接：https://www.layui.com/doc/modules/table.html

20. 文件上传

LayUI 文件上传可以单文件上传也可以多文件上传，对于有springboot基础的小伙伴，可以阅读下面这篇博客详细了解，这里不再赘述，对于没有文件上传下载经验的小伙伴，建议去学习一下后端如何写文件上传下载接口，在自己亲自尝试！

springboot+LayUI 文件上传(单文件多文件)

转载：https://blog.csdn.net/weixin_43591980/article/details/109148129

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章