Layui介绍_layui cdn-CSDN博客

本文链接：https://blog.csdn.net/KAIYUANHEMIAO/article/details/134050667

下载引用

官网下载

您可以在官网首页或更新日志页面下载到 Layui，它经过了自动化构建，更适合用于生产环境。

Git 下载

您也可以通过 GitHub 或 Gitee 的 releases 列表下载，或直接下载整个仓库。

npm 下载

npm i layui

第三方 CDN 方式引入：

UNPKG 和 CDNJS 均为第三方免费 CDN，资源通过 NPM/GitHub 进行同步。另外还可以采用国内的 Staticfile CDN。

<link href="//unpkg.com/layui@2.8.18-rc.2/dist/css/layui.css" rel="stylesheet">

<script src="//unpkg.com/layui@2.8.18-rc.2/dist/layui.js"></script>

介绍

Layui 是一套免费的开源 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

Layui常用方法

使用Layui的基本结构：在HTML文件中引入Layui的CSS和JS文件，并按照规定的结构编写页面代码，如下所示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Webpage</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
  
  <!-- 页面内容 -->
  
  <script src="layui/layui.js"></script>
  <script>
    // 初始化Layui组件
    layui.use(['element', 'form'], function(){
      var element = layui.element;
      var form = layui.form;
      
      // 其他操作代码
    });
  </script>
</body>
</html>

使用Layui的组件：Layui提供了丰富的组件，如表单、表格、弹窗等，可以通过引入对应的模块并按照文档的要求使用，例如：
```
// 使用表单组件
form.on('submit(formDemo)', function(data){
  console.log(data.field); // 获取表单数据
  return false; // 阻止表单提交
});
```

使用Layui的接口：Layui还提供了一些常用的接口，如Ajax请求、弹窗、消息提示等，可以通过调用对应的方法来实现，例如：

// 使用Ajax请求
layui.$.ajax({
  url: 'api/user',
  type: 'GET',
  success: function(res){
    console.log(res); // 处理请求成功的数据
  },
  error: function(xhr, status, error){
    console.log(error); // 处理请求失败的错误信息
  }
});

// 使用弹窗
layer.open({
  title: '提示',
  content: '这是一个弹窗',
  btn: ['确定', '取消'],
  yes: function(index, layero){
    // 点击确定按钮的回调函数
    layer.close(index); // 关闭弹窗
  },
  btn2: function(index, layero){
    // 点击取消按钮的回调函数
    layer.close(index); // 关闭弹窗
    return false; // 阻止弹窗自动关闭
  }
});

// 使用消息提示
layer.msg('操作成功', {icon: 1});