LayUI前框框架普及版

news2024/11/27 21:43:37

LayUI

一、课程目标

1. 【了解】LayUI框架                       
2. 【理解】LayUI基础使用
3. 【掌握】LayUI页面元素
4. 【掌握】LayUI内置模块

二、LayUI基本使用

2.1 概念

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

2.2 下载

2.2.1 官网下载

官网 : https://layuion.com/

官方文档:https://layuion.com/docs/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MeMOPgCr-1686143517855)(assets/image-20210220172436881.png)]

2.2.2 目录结构

官网下载后，解压文件，目录结构如下

  ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js

2.3 简单实例

LayUI的使用基本分为两个方面：

**页面元素：**主要是进行页面样式的修改，通过指定的layUI的class进行设置，只需要引入LayUI.css即可使用

**内置模块：**进行页面动态效果功能的展示，通过指定的layUI的相应代码进行书写，需要引入LayUI.js并按照指定格式进行书写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用layui</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body>

        <!-- 你的HTML代码 -->
        <script src="../layui/layui.js"></script>
        <script>
            //一般直接写在一个js文件中
            layui.use(['layer', 'form'], function(){
                var layer = layui.layer
                ,form = layui.form;

                layer.msg('Hello World');
            });
        </script> 
    </body>
</html>

三、LayUI页面元素

layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要稍稍遵循一定的规范。

3.1 栅格

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统，将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

  1. 采用 layui-row 来定义行，如：

    2.采用类似 layui-col-md 这样的预设类来定义一组列（column），且放在行（row）内。其中：
    变量md 代表的是不同屏幕下的标记（可选值见下文）
    变量代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
    如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
    3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
    4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
    5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

3.1.1 示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCBlw3ED-1686143517856)(LayUI.assets/image-20210220084437679.png)]

<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>
   
  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

3.2 颜色

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

3.2.1 常用主色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PTIVt9RN-1686143517857)(LayUI.assets/image-20210220084729592.png)]

3.2.2 场景色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3neaTYF-1686143517858)(LayUI.assets/image-20210220084741838.png)]

3.2.3 极简中性色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUWBnEv0-1686143517860)(LayUI.assets/image-20210220084751565.png)]

3.2.4 内置的背景色CSS类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WrMd6lqD-1686143517862)(LayUI.assets/image-20210220084805171.png)]

3.3 字体图标

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

3.3.1 使用

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class

例如：

<i class="layui-icon layui-icon-face-smile"></i>

3.3.2 内置图标一览表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38tEaJP4-1686143517862)(LayUI.assets/image-20210220085050453.png)]

更多： https://www.layui.com/doc/element/icon.html

3.4 动画

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

3.4.1 使用

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
 
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

3.4.2 基本动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0THwV4w-1686143517864)(LayUI.assets/image-20210220085253278.png)]

3.5 按钮

layUI通过样式设置，可以将任意元素设置为相应的按钮样式

3.5.1 基本使用

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

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

3.5.2 主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpltfHeq-1686143517866)(LayUI.assets/image-20210220085732830.png)]

名称组合
原始按钮class=“layui-btn layui-btn-primary”
默认按钮class=“layui-btn”
百搭按钮class=“layui-btn layui-btn-normal”
暖色按钮class=“layui-btn layui-btn-warm”
警告按钮class=“layui-btn layui-btn-danger”
禁用按钮class=“layui-btn layui-btn-disabled”

3.5.3 尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51pM9DRb-1686143517867)(LayUI.assets/image-20210220085821417.png)]

尺寸组合
大型按钮class=“layui-btn layui-btn-lg”
默认按钮class=“layui-btn”
小型按钮class=“layui-btn layui-btn-sm”
迷你按钮class=“layui-btn layui-btn-xs”

可以与主题按钮组合使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iOlsvXW-1686143517870)(LayUI.assets/image-20210220085919592.png)]

尺寸组合
大型百搭class=“layui-btn layui-btn-lg layui-btn-normal”
正常暖色class=“layui-btn layui-btn-warm”
小型警告class=“layui-btn layui-btn-sm layui-btn-danger”
迷你禁用class=“layui-btn layui-btn-xs layui-btn-disabled”

也可以根据所在块自适应大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7IaxKLZZ-1686143517871)(LayUI.assets/image-20210220085942658.png)]

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

3.5.4 圆角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJAOzTM6-1686143517872)(LayUI.assets/image-20210220090506559.png)]

主题组合
原始class=“layui-btn layui-btn-radius layui-btn-primary”
默认class=“layui-btn layui-btn-radius”
百搭class=“layui-btn layui-btn-radius layui-btn-normal”
暖色class=“layui-btn layui-btn-radius layui-btn-warm”
警告class=“layui-btn layui-btn-radius layui-btn-danger”
禁用class=“layui-btn layui-btn-radius layui-btn-disabled”

3.5.5 图标按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GvGOvj5-1686143517874)(LayUI.assets/image-20210220090646395.png)]

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

3.5.6 按钮组

将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rcyhUw8-1686143517876)(LayUI.assets/image-20210220090855049.png)]

<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.5.7 按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLn4uU5Y-1686143517877)(LayUI.assets/image-20210220091006959.png)]

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按钮一</button> 
  <button type="button" class="layui-btn">按钮二</button> 
  <button type="button" class="layui-btn">按钮三</button> 
</div>

3.6 表单

LayUI通过样式设置与特定的js实现了更具有风格样式的表单，但是依赖于相应的表单模块

3.6.1 简单使用

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yjm2F0Da-1686143517878)(LayUI.assets/image-20210220094149559.png)]

<form class="layui-form" action="">
  <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>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

3.6.2 行区块结构

基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

<div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>

3.6.3 输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtcL6P2U-1686143517880)(LayUI.assets/image-20210220094351587.png)]

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通用CSS类

3.6.4 下拉选择框

3.6.4.1 默认选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqzLBWwm-1686143517881)(LayUI.assets/image-20210220094530902.png)]

<select name="city" lay-verify="">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

3.6.4.2 分类选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9gijm72-1686143517882)(LayUI.assets/image-20210220094655219.png)]

<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>

3.6.4.3 搜索选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXEEueUe-1686143517885)(LayUI.assets/image-20210220094753884.png)]

以及通过设定属性 lay-search 来开启搜索匹配功能

<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
  ……
</select>

属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持

3.6.5 复选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQvr6VRy-1686143517886)(LayUI.assets/image-20210220094858296.png)]

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on

3.6.6 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEkhwHCe-1686143517888)(LayUI.assets/image-20210220095013155.png)]

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on

3.6.7 单选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfwjVLqx-1686143517889)(LayUI.assets/image-20210220095117539.png)]

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

属性title可自定义文本
属性disabled开启禁用
设置*value=“xxx”*可自定义值，否则选中时返回的就是默认的on

3.6.8 文本域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8my6ge2B-1686143517891)(LayUI.assets/image-20210220095205992.png)]

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

3.6.9 表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtLBtvhP-1686143517895)(LayUI.assets/image-20210220095318243.png)]

<form class="layui-form layui-form-pane" action="">
  内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
  <div class="layui-form-item" pane>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

3.7 导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。

3.7.1 水平导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HpVlshMe-1686143517897)(LayUI.assets/image-20210220095630462.png)]

<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>
</ul>
 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.7.2 垂直/侧边导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A83l2u75-1686143517900)(LayUI.assets/image-20210220095706408.png)]

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="">跳转</a></dd>
    </dl>
  </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"><a href="">大数据</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.7.3 面包屑导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3XCk5Dt-1686143517902)(LayUI.assets/image-20210220095826267.png)]

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

可以通过设置属性 lay-separator=“-” 来自定义分隔符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbfjLA7L-1686143517904)(LayUI.assets/image-20210220100206026.png)]

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8 Tab选项卡

Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用）

3.8.1 默认Tab选项卡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrerId8l-1686143517906)(LayUI.assets/image-20210220100344934.png)]

<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>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8.2 Tab简洁风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQtb6Ash-1686143517907)(LayUI.assets/image-20210220100429785.png)]

<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>
</div>      
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8.3 Tab卡片风格

通过追加class：layui-tab-card来设定卡片风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKZR3439-1686143517910)(LayUI.assets/image-20210220101939554.png)]

<div class="layui-tab layui-tab-card">
  <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>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8.4 带删除的Tab

你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIwTk9WB-1686143517913)(LayUI.assets/image-20210220111550729.png)]

<div class="layui-tab" 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">
    <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>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.9 进度条

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素

依赖加载组件：element

3.9.1 常规用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ug6Qu95Y-1686143517914)(LayUI.assets/image-20210220111844383.png)]

<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="10%"></div>
</div>
 
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

属性 lay-percent ：代表进度条的初始百分比

3.9.2 显示进度比文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpzEEX1D-1686143517916)(LayUI.assets/image-20210220112052378.png)]

<div class="layui-progress" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>
       
<div class="layui-progress" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

3.9.3 大号进度条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOPESjmG-1686143517919)(LayUI.assets/image-20210220112151445.png)]

<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

3.10 面板

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

依赖加载组件：element

3.10.1 卡片面板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tz33DKrr-1686143517921)(LayUI.assets/image-20210220112400179.png)]

<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
    卡片式面板面板通常用于非白色背景色的主体内<br>
    从而映衬出边框投影
  </div>
</div>

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

3.10.2 折叠面板

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJdROJBB-1686143517922)(LayUI.assets/image-20210220112455934.png)]

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
 
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.10.3 手风琴面板

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWlVY5QH-1686143517924)(LayUI.assets/image-20210220112558207.png)]

<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.11 静态表格

通过内置的自定义属性对其进行风格的多样化设定。

3.11.1 常规用法

通过 layui-table 将表格样式修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdKaNJZf-1686143517926)(LayUI.assets/image-20210220112754506.png)]

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

3.11.2 基础属性

属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起使用
lay-skin=“属性值”line （行边框风格） row （列边框风格） nob （无边框风格）若使用默认风格不设置该属性即可
lay-size=“属性值”sm （小尺寸） lg （大尺寸）若使用默认尺寸不设置该属性即可

将所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：

<table lay-even lay-skin="line" lay-size="lg">
…
</table>

3.11.3 表格尺寸

通过 lay-size=“sm” 或 *lay-size=“lg”*进行尺寸的切换

<table class="layui-table" lay-size="sm">
  小尺寸表格（内部结构参见右侧目录“常规用法”）
</table>
 
<table class="layui-table" lay-size="lg">
  大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>

3.12 徽章

徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JoGD1Xj-1686143517928)(LayUI.assets/image-20210220113132775.png)]

小圆点，通过 layui-badge-dot 来定义，里面不能加文字
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
 
椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
 
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
 
边框体，通过 layui-badge-rim 来定义
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>

3.12.1 与其它元素的搭配

按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PaP5x5IC-1686143517932)(LayUI.assets/image-20210220113234007.png)]

<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0tfR2gI-1686143517937)(LayUI.assets/image-20210220113343007.png)]

<ul class="layui-nav" style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
</ul>

选项卡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hpZ9vh7n-1686143517941)(LayUI.assets/image-20210220113420407.png)]

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理<span class="layui-badge-dot"></span></li>
    <li>最新邮件<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>

3.13 时间线

按照指定设置样式书写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYHlDPQh-1686143517947)(LayUI.assets/image-20210220113515935.png)]

<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>

注意：

  • 图标可以任意定义（但并不推荐更改）
  • 标题区域并不意味着一定要加粗
  • 内容区域可自由填充。

四、LayUI内置模块

LayUI提供了很多的内置模块，提供相应的效果与功能，为了减少代码的冗余，默认是不加载所有的模块的，所以需要在使用相应模块时加载对应模块

<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
//可以一次加载多个模块
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script>

4.1 日期选择laydate

年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。

4.1.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>

4.1.2 elem 属性

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
  laydate.render({ 
    elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
  });
});
</script>

4.1.3 type 属性

类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：

type可选值名称用途
year年选择器只提供年列表选择
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
//年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});
 
//年月选择器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});
 
//日期选择器
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默认，可不填
});
 
//时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});
 
//日期时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});
    
});
</script>

4.1.4 range 属性

类型：Boolean/String，默认值：false

如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
//可以一次加载多个模块
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
 //年范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true //或 range: '~' 来自定义分割字符
});
});
</script>

4.1.5 format 属性

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零。
m分钟，允许一位数。
ss秒数，至少两位数。如果不足两位，则前面补零。
s秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式示例值
yyyy-MM-dd HH:mm:ss2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒2017年08月18日 20时08分08秒
yyyyMMdd20170818
dd/MM/yyyy18/08/2017
yyyy年M月2017年8月
M月d日8月18日
北京时间：HH点mm分北京时间：20点08分
yyyy年的M月某天晚上，大概H点2017年的8月某天晚上，大概20点
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
  //自定义日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});
});
</script>

4.1.6 value 属性

类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
//传入符合format格式的字符给初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必须遵循format参数设定的格式
});
 
//传入Date对象给初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});
});
</script>

4.1.7 min/max 属性

类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’

设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

  1. 如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
    2.如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
    3.如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //日期有效范围只限定在：2017年
laydate.render({ 
  elem: '#test'
  ,min: '2017-1-1'
  ,max: '2017-12-31'
});
 
//日期有效范围限定在：过去一周到未来一周
laydate.render({ 
  elem: '#test'
  ,min: -7 //7天前
  ,max: 7 //7天后
});
 
//日期时间有效范围的设定: 
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,min: '2017-8-11 12:30:00'
  ,max: '2017-8-18 12:30:00'
});
 
//时间有效范围设定在: 上午九点半到下午五点半
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
});
});
</script>

4.1.8 showBottom 属性

类型：Boolean，默认值：true

如果设置 false，将不会显示控件的底部栏区域

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//不显示底部栏
laydate.render({
  elem: '#test'
  ,showBottom: false
});
});
</script>

4.1.9 btns 属性

类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]

右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//只显示清空和确认
laydate.render({
  elem: '#test'
  ,btns: ['clear', 'confirm']
});
});
</script>

4.1.10 calendar 属性

类型：Boolean，默认值：false

我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //允许显示公历节日
laydate.render({
  elem: '#test'
  ,calendar: true
});
});
</script>

4.1.11 mark 属性

类型：Object，默认值：无

calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

标注格式说明
每年的日期{‘0-9-18’: ‘国耻’}0 即代表每一年
每月的日期{‘0-0-15’: ‘中旬’}0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期{‘2017-8-21’: ‘发布’)-

可同时设定多个，如：

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //标注重要日子
var ins1 = laydate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年12月31日
    ,'0-0-10': '工资' //每个月10号
    ,'2017-8-15': '' //具体日期
    ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
    ,'2017-8-21': '发布'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
      ins1.hint('中国人民抗日战争胜利72周年');
    }
  }
});
});
</script>

4.2 分页laypage

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：

快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layPage快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div id="test1"></div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});
</script>
</body>
</html>

4.2.1 基础参数

参数选项说明类型默认值
elem指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)String/Object-
count数据总数。一般通过服务端得到Number-
limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10
limits每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]
curr起始页。一般用于刷新类型的跳页以及HASH跳页。Number1
groups连续出现的页码个数Number5
prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页
next自定义“下一页”的内容，同上String下一页
first自定义“首页”的内容，同上String1
last自定义“尾页”的内容，同上String总页数值
layout自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）Array[‘prev’, ‘page’, ‘next’]
theme自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题String-
hash开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页String/Booleanfalse

4.3 数据表格table

是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能

4.3.1 快速使用

创建一个table实例最简单的方式是，在页面放置一个元素 ，然后通过 table.render() 方法指定该容器，如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnqiuYw0-1686143517951)(LayUI.assets/image-20210220132051285.png)]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>
</body>
</html>

4.3.2 表格渲染

三种初始化渲染方式

方式机制适用场景
01.方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02.自动渲染HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分
03.转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

4.3.2.1 方法渲染

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

<table id="demo" lay-filter="test"></table>

<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});
});
</script>

事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。

备注：*table.render()*方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作

4.3.2.2 自动渲染

即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

  1. 带有 class=“layui-table” 的 标签。
  2. 对标签设置属性 lay-data=“” 用于配置一些基础参数
  3. 在标签中设置属性*lay-data=“”*用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

4.3.2.3 静态表格渲染

假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2CHmgVBO-1686143517954)(LayUI.assets/image-20210220133200944.png)]

转换后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDp69cbE-1686143517957)(LayUI.assets/image-20210220133212902.png)]

<table lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:100}">昵称</th>
      <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
      <th lay-data="{field:'sign'}">签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心1</td>
      <td>66</td>
      <td>人生就像是一场修行a</td>
    </tr>
    <tr>
      <td>贤心2</td>
      <td>88</td>
      <td>人生就像是一场修行b</td>
    </tr>
    <tr>
      <td>贤心3</td>
      <td>33</td>
      <td>人生就像是一场修行c</td>
    </tr>
  </tbody>
</table>

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

 
//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
  //支持所有基础参数
}); 
});
</script>

4.3.3 基础参数

基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。基础参数一般出现在以下几种场景中：

场景一：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: '/api/data'
});
       
场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
 
更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

参数类型说明示例值
elemString/DOM指定原始 table 容器的选择器或 DOM，方法渲染方式必填“#demo”
colsArray设置表头。值是一个二维数组。方法渲染方式必填详见表头参数
url（等）-异步数据接口相关参数。其中 url 参数为必填项详见异步接口
toolbarString/DOM/Boolean开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器toolbar: ‘
xxx
’ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default’ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数		false
defaultToolbarArray该参数可自由配置头部工具栏右侧的图标按钮详见头工具栏图标
widthNumber设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。1000
heightNumber/String设定容器高度详见height
cellMinWidthNumber（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth100
doneFunction数据渲染完的回调。你可以借此做一些其它的操作详见done回调
dataArray直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。[{}, {}, {}, {}, …]
totalRowBoolean是否开启合计行区域。layui 2.4.0 新增false
pageBoolean/Object开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）{theme: ‘#c00’}
limitNumber每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数30
limitsArray每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数[30,60,90]
loadingBoolean是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式false
titleString定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增“用户表”
textObject自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。详见自定义文本
autoSortBoolean默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增详见监听排序
initSortObject初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。详见初始排序
idString设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 ** 中的 id 参数中获取。test
skin（等）-设定表格各种外观、尺寸等详见表格风格

4.3.4 表头参数

如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在th标签上

参数类型说明示例值
fieldString设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识username
titleString设定标题名称用户名
widthNumber/String设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比 请结合实际情况，对不同列做不同设定。200 30%
minWidthNumber局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth100
typeString设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列）任意一个可选值
LAY_CHECKEDBoolean是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。true
fixedString固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。left（同 true） right
hideBoolean是否初始隐藏列，默认：false。layui 2.4.0 新增true
totalRowBoolean/Object是否开启该列的自动合计功能，默认：false。当开启时，则默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：codelayui.code{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}] "totalRow": { "score": "666" ,"experience": "999" }} 如上，在 totalRow 中返回所需统计的列字段名和值即可。 另外，totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。true
totalRowTextString用于显示自定义的合计文本。layui 2.4.0 新增“合计：”
sortBoolean是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：‘贤心’ > ‘2’ > ‘100’，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。true
unresizeBoolean是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。false
editString单元格编辑类型（默认不开启）目前只支持：text（输入框）text
eventString自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理任意字符
styleString自定义单元格样式。即传入 CSS 样式background-color: #5FB878; color: #fff;
alignString单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）center
colspanNumber单元格所占列数（默认：1）。一般用于多级表头3
rowspanNumber单元格所占行数（默认：1）。一般用于多级表头2
templetString自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等详见自定义模板
toolbarString绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮详见行工具事件
//方法渲染：
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
});
 
它等价于自动渲染：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:'id', width:80}">ID</th>
      <th lay-data="{field:'username', width:180}">用户名</th>
    </tr>
  </thead>
</table>

4.3.5 异步数据接口

数据的异步请求由以下几个参数组成：

参数名功能
url接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
method接口http请求类型，默认：get
where接口的其它参数。如：where: {token: ‘sasasas’, id: 123}
contentType发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: ‘application/json’
headers接口的请求头。如：headers: {token: ‘sasasas’}
parseData数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为（参考：/demo/table/user/）
很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：
{
  "status": 0,
  "message": "", 
  "total": 180, 
  "data": {
    "item": [{}, {}]
  }
}
那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式。转换为标准格式
{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 
------------------------------------------------------------------------------

table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
  //,…… //其他参数
});

4.4 表单form

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class=“layui-form”，一切的工作都会在你加载完form模块后，自动完成。

4.4.1 基本使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关关</label>
    <div class="layui-input-block">
      <input type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男">
      <input type="radio" name="sex" value="1" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">请填写描述</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

4.4.2 更新渲染

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制，但没有关系，你只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数（type）值描述
select刷新select选择框渲染
checkbox刷新checkbox复选框（含开关）渲染
radio刷新radio单选框框渲染
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染

第二个参数：filter，为 class=“layui-form” 所在元素的 lay-filter=“” 的值。你可以借助该参数，对表单完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">
  …
</div>
 
<div class="layui-form" lay-filter="test2">
  …
</div>
      
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……

4.4.3 预设元素属性

<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>

上述的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：

属性名属性值说明
title任意字符设定元素名称，一般用于checkbox、radio框
lay-skinswitch（开关风格） primary（原始风格）定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-ignore任意字符或不设值是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter任意字符事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
lay-verifyrequired（必填项） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） 自定义值同时支持多条规则的验证，格式：lay-verify=“验证A|验证B” 如：lay-verify=“required|phone|number” 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=“pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verTypetips（吸附层） alert（对话框） msg（默认）用于定义异常提示层模式。
lay-reqText任意字符用于自定义必填项（即设定了 lay-verify=“required” 的表单）的提示文本 注意：该功能为 layui 2.5.0 新增
lay-submit无需填写值绑定触发提交的元素，如button

4.4.4 事件监听

语法：form.on(‘event(过滤器值)’, callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

event描述
select监听select下拉选择事件
checkbox监听checkbox复选框勾选事件
switch监听checkbox复选框开关事件
radio监听radio单选框事件
submit监听表单提交事件

默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。如：

form.on('select(test)', function(data){
  console.log(data);
});

4.4.4.1 监听select选择

下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：

form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});

注意：如果你想监听所有的select，去掉过滤器*(filter)*即可。

4.4.4.2 监听checkbox复选

复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：

form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});

4.4.4.3 监听switch开关

开关被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启，true或者false
  console.log(data.value); //开关value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});

4.4.4.4 监听radio单选

radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});

4.4.4.5 监听submit提交

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

**注意：**上述的*submit(*)*中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

<button lay-submit lay-filter="*">提交</button>

你可以把*号换成任意的值，如：*lay-filter=“go”，但监听事件时也要改成 form.on(‘submit(go)’, callback);

4.4.5 表单赋值 / 取值

语法：form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
});
 
//获取表单区域所有值
var data1 = form.val("formTest");

第二个参数中的键值是表单元素对应的 name 和 value。

4.4.6 表单验证

只需要在表单元素上加上 lay-verify=“” 属性值即可。如：

<input type="text" lay-verify="email"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">

也可以自定义复杂校验

form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
});

当你自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

4.5 穿梭框transfer

4.5.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>穿梭框组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
   
    //渲染
    transfer.render({
      elem: '#test1'  //绑定元素
      ,data: [
        {"value": "1", "title": "李白", "disabled": "", "checked": ""}
        ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
        ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
      ]
      ,id: 'demo1' //定义索引
    });
  });
  </script>
</body>
</html>

4.5.2 基础参数

参数选项说明类型默认值
elem指向容器选择器String/Object-
title穿梭框上方标题Array[‘标题一’, ‘标题二’]
data数据源Array[{}, {}, …]
parseData用于对数据源进行格式解析Function详见数据源格式解析
value初始选中的数据（右侧列表）Array-
id设定实例唯一索引，用于基础方法传参使用。String-
showSearch是否开启搜索Booleanfalse
width定义左右穿梭框宽度Number200
height定义左右穿梭框高度Number340
text自定义文本，如空数据时的异常提示等。
text: { none: ‘无数据’ //没有数据时的文案 ,searchNone: ‘无匹配数据’ //搜索无匹配数据时的文案} `		Object-
onchange左右数据穿梭时的回调Function详见穿梭时的回调

4.5.3 数据源格式解析

数据格式解析的回调函数，用于将任意数据格式解析成 transfer 组件规定的数据格式，以下是合法的数据格式如下：

合法的数据格式

[
  {"value": "1", "title": "李白", "disabled": "", "checked": ""}
  ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
  ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]

不符合规范的数据格式

[
  {"id": "1", "name": "李白"}
  ,{"id": "2", "name": "杜甫"}
  ,{"id": "3", "name": "贤心"}
]

需要将其解析成 transfer 组件所规定的数据格式：

transfer.render({
  elem: '#text1'
  ,data: [
    {"id": "1", "name": "李白"}
    ,{"id": "2", "name": "杜甫"}
    ,{"id": "3", "name": "贤心"}
  ]
  ,parseData: function(res){
    return {
      "value": res.id //数据值
      ,"title": res.name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }
});

4.5.4 获得右侧数据

穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台

transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});
 
//获得右侧数据
var getData = transfer.getData('demo1');

4.6 轮播图carousel

carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

4.6.1 快速使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oe8746PI-1686143517960)(LayUI.assets/image-20210220143512808.png)]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>

在HTML结构中，只需要简单地注意这两项：

  1. 外层元素的 class=“layui-carousel” 用来标识为一个轮播容器
  2. 内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项说明类型默认值
elem指向容器选择器，如：elem: ‘#id’。也可以是DOM对象string/object无
width设定轮播容器宽度，支持像素和百分比string‘600px’
height设定轮播容器高度，支持像素和百分比string‘280px’
full是否全屏轮播booleanfalse
anim轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）string‘default’
autoplay是否自动切换booleantrue
interval自动切换的时间间隔，单位：ms（毫秒），不能低于800number3000
index初始开始的条目索引number0
arrow切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）string‘hover’
indicator指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效string‘inside’
trigger指示器的触发事件string‘click’

4.6.3 切换事件

轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;
 
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});

4.6.4 重置轮播

在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);

1">

条目1
条目2
条目3
条目4
条目5
```

在HTML结构中，只需要简单地注意这两项：

  1. 外层元素的 class=“layui-carousel” 用来标识为一个轮播容器
  2. 内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项说明类型默认值
elem指向容器选择器，如：elem: ‘#id’。也可以是DOM对象string/object无
width设定轮播容器宽度，支持像素和百分比string‘600px’
height设定轮播容器高度，支持像素和百分比string‘280px’
full是否全屏轮播booleanfalse
anim轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）string‘default’
autoplay是否自动切换booleantrue
interval自动切换的时间间隔，单位：ms（毫秒），不能低于800number3000
index初始开始的条目索引number0
arrow切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）string‘hover’
indicator指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效string‘inside’
trigger指示器的触发事件string‘click’

4.6.3 切换事件

轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;
 
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});

4.6.4 重置轮播

在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);

618，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华
社为您精选多款高分好书，涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多
个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK
多得（或扫描京东二维码）查看详情吧！
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/620670.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nginx+Tomcat 负载均衡、动静分离

Nginx+Tomcat 负载均衡、动静分离

目录 一、Nginx代理服务器概念 1.正向代理 2.反向代理 二、动静分离 三、负载均衡 四、Nginx七层代理实验 1.部署Nginx服务 2. 部署Tomcat服务 2.1在192.168.88.50 虚拟机上部署双实例 2.2在192.168.88.60 上部署Tomcat服务器3 3.动静分离配置 3.1Tomcat1 server 配…
阅读更多...
RecyclerView的回收缓存均由内部类Recycler完成

RecyclerView的回收缓存均由内部类Recycler完成

1. RecyclerView的三级缓存 通常在RecyclerView中存在着四级缓存&#xff0c;从低到高分别为&#xff1a; 可直接重复使用的临时缓存&#xff08;mAttachedScrap/mChangedScrap&#xff09; mAttachedScrap中缓存的是屏幕中可见范围的ViewHoldermChangedScrap只能在预布局状态…
阅读更多...
Material—— 常用材质节点

Material—— 常用材质节点

目录 Coordinates Absolute World Position Actor Position Object Position Utility SphereMask Coordinates 表示坐标类的节点&#xff1b; Absolute World Position 别名为WorldPosition&#xff0c;此节点输出当前像素在世界空间内的位置&#xff1b;常用于查找相机到…
阅读更多...
作为过来人：有什么话想对当年高考前的自己说

作为过来人：有什么话想对当年高考前的自己说

目录 引言千人千面-有什么话想对当年高考前的自己说怀念高中&#xff0c;数学太难多考一分&#xff0c;人生就会不一样一定要勇敢&#xff0c;不止高考别把高考不当回事6的我没话说想到啥就去做别选**大学/专业强烈想出名的拖鞋哥英语全选C&#xff0c;理综要细心会的全做对当时…
阅读更多...
Spring - 注解开发

Spring - 注解开发

文章目录 Spring的注解开发一、Bean 基本注解开发1.1 Component Bean的配置1.2 其他注解配置Bean1.3 Component 衍生注解 二、Bean依赖注入注解开发2.1 Value2.2 Autowired2.3 Qualifier2.4 Resource 三、非自定义注解开发3.1 无参非自定义注解开发3.2 有参非自定义注解开发 四…
阅读更多...
Domino 14新内核

Domino 14新内核

大家好&#xff0c;才是真的好。 还记得去年&#xff0c;我们不断跟进而放出的Notes/Domino产品路线图吗&#xff1f;是的&#xff0c;HCL正在按照产品路线图稳步推进&#xff0c;而很多人提出的idea&#xff0c;也逐步加入到产品中&#xff0c;等会我们也会聊到。 我最喜欢这…
阅读更多...
MySQL安装-Linux版

MySQL安装-Linux版

MySQL-Linux版安装 1、准备一台Linux服务器 云服务器或者虚拟机都可以&#xff1b; Linux的版本为 CentOS7&#xff1b; 2、 下载Linux版MySQL安装包 下载地址 3、上传MySQL安装包 使用FinalShell软件上传即可&#xff01; 4、 创建目录,并解压 mkdir mysqltar -xvf my…
阅读更多...
【Web服务器】Nginx网站服务

【Web服务器】Nginx网站服务

文章目录 一、Nginx 概述1.什么是 Nginx2.Nginx 的特点3.Nginx 应用场景 二、Nginx 服务基础1.编译安装 Nginx 服务1.1 布置环境1.2 安装依赖包1.3 创建运行用户、组1.4 编译安装 2.Nginx 的运行控制2.1 检查配置文件2.2 启动、停止 Nginx2.3 日志分割以及升级 Nginx 服务2.4 添…
阅读更多...
调用腾讯API实现图片滤镜

调用腾讯API实现图片滤镜

目录 1. 作者介绍2. 图像滤波介绍3. 实验过程及结果&#xff08;附完整代码&#xff09;3.1 准备工作3.2 实验代码3.3 实验结果 1. 作者介绍 班梦威&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2022级研究生 研究方向&#xff1a;模式识别与人工智能 电子…
阅读更多...
企业如何有效制定企业信息化发展规划？（附信息化模板）

企业如何有效制定企业信息化发展规划？（附信息化模板）

如何有效制定企业信息化发展规划&#xff1f;企业信息化发展规划是一个宏大而又复杂的命题&#xff0c;这篇来掰开揉碎讲一下企业应该如何有效制定信息化发展规划。 这里不给大家灌鸡汤&#xff0c;也不给大家画大饼&#xff0c;就说些实在的。 如果你想找经验方法&#xff0…
阅读更多...
Lambda表达式与函数式编程

Lambda表达式与函数式编程

文章目录 函数式编程——Stream流概述为什么学?函数式编程思想 Lambda表达式概述Lambda表达式的前身省略规则 Stream流概述案例数据准备创建流中间操作终结操作reduce归并注意事项 Optional概述创建对象安全消费值获取值安全获取值过滤数据转换 函数式接口常用的默认方法 方法…
阅读更多...
APPSCAN扫描https协议的网站证书安装过程（Googel浏览器）

APPSCAN扫描https协议的网站证书安装过程（Googel浏览器）

【1】首先打开我们的appscan,点击外部设备。 【2】点击记录代理配置 【3】弹出选项后&#xff0c;在记录代理下我们可以看到AppScan SSL证书&#xff0c;这点我们点击导出 【4】这里你选择一个合适的位置&#xff0c;点击保存 【5】保存后的文件是一个zip压缩包&#xff0c;…
阅读更多...
GPT4和Claude100k测试使用

GPT4和Claude100k测试使用

总述 程序员们通常使用大量代码&#xff0c;找到一个能够使用Claude100k和GPT4的&#xff0c;长代码优化有希望啦&#xff01; Liaobots&#xff1a;支持GPT4和Claude100k 不定期供应GPT4 32k&#xff0c;支持最多24000字符请求 大家有时候会觉得GPT4 8k不够用&#xff0c;…
阅读更多...
TensorFlow入门知识

TensorFlow入门知识

个人理解 TensorFlow是集齐了很多深度学习相关的算法的框架&#xff0c;你可以利用他搭建自己的神经网络模型。对于开发者来说&#xff0c;告诉TensorFlow一批特征数据和最终的答案数据&#xff0c;让其通过一个神经网络模型进行训练&#xff0c;最终输出模型。模型将应用于应…
阅读更多...
DSP-OMAPL-138 RTOS开发（1）——报错总结

DSP-OMAPL-138 RTOS开发（1）——报错总结

1 git的作用 第一个问题&#xff0c;也不算错误&#xff1a;工程文件会有一个名称会有一个横着的箭头并且文件名前面都有问好&#xff0c;不算错误&#xff08;算个发现&#xff09;&#xff0c;但是发现将git文件删去即可&#xff0c;如果没有&#xff0c;右击工程文件->选…
阅读更多...
用逆向思维学习技术

用逆向思维学习技术

tip: 作为程序员一定学习编程之道&#xff0c;一定要对代码的编写有追求&#xff0c;不能实现就完事了。我们应该让自己写的代码更加优雅&#xff0c;即使这会费时费力。 推荐&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; 前言 学习任何知识&#xff0c…
阅读更多...
新Ubuntu怎么装Nidia驱动,cuda和cudnn

新Ubuntu怎么装Nidia驱动,cuda和cudnn

怎么安装nvidia驱动 软件更新->附加驱动 选择一个喜欢的 或者找推荐的 Ubuntu 20.04安装CUDA & CUDNN 手把手带你撸_ubuntu20.04 无图形化安装cuda_哈希Map的博客-CSDN博客 sudo ubuntu-drivers autoinstall 怎么安装cuda gcc 不用降级 &#xff08;我没降级就安装好…
阅读更多...
设计模式-02.经典设计原则-第二节[必读]

设计模式-02.经典设计原则-第二节[必读]

设计模式经典设计原则-第二节 依赖反转原则&#xff08;DIP&#xff09; 关于 SOLID 原则&#xff0c;我们已经学过单一职责、开闭、里式替换、接口隔离这四个原则。今天&#xff0c;我们再来学习最后一个原则&#xff1a;依赖反转原则。在前面&#xff0c;我们讲到&#xff…
阅读更多...
C++ 深入理解多态及拓展

C++ 深入理解多态及拓展

文章目录 1. 理解虚表1.1 虚表1.2 验证1.3 子类虚表1.4 相同类不同对象的虚表 2. 静态绑定和动态绑定2.1 静态绑定2.2 动态绑定 3. 多态的实现原理3.1 向上转型3.2 多继承3.3 原理 4. 拓展4.1 构造函数能不能是虚函数4.2 父类和子类的析构函数在底层的命名问题4.3 对象之间无法…
阅读更多...
c++实现smtp发送邮件，支持ssl的465端口发送，支持附件、一次发送多人、抄送等

c++实现smtp发送邮件，支持ssl的465端口发送，支持附件、一次发送多人、抄送等

前言 c实现smtp发送邮件&#xff0c;支持ssl的465端口发送&#xff0c;支持附件、一次发送多人、抄送等。 这里只使用了openssl库&#xff08;用来支持ssl的465端口&#xff09;&#xff0c;其他部分是原生c,支持在win/linux运行。 网上很多都是原始的支持25端口&#xff0c;明…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023