layui 类ui的使用

最新推荐文章于 2024-07-09 09:52:23 发布

渡柒玖

最新推荐文章于 2024-07-09 09:52:23 发布

阅读量237

点赞数

文章标签： ui 前端

本文链接：https://blog.csdn.net/weixin_65287312/article/details/132323522

版权

类UI

Layui介绍

Layui介绍

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

下载与引用

官网下载：https://layui.org.cn/index.html
下载到 Layui 当前版本，它经过了自动化构建，更适合用于生产环境。目录结构如下：
layui/
├─css
│ └─layui.css # 核心样式库
└─layui.js # 核心模块库
getee下载：https://gitee.com/layui/layui/
npm 下载：

npm i layui

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

<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
 
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js">

第一个案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quick Start - Layui</title>
  <link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
</head>
<body>
  <!-- HTML Content -->
  <script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script>
  <script>
  // Usage
  layui.use(function(){
    var layer = layui.layer;
    // Welcome
    layer.msg('Hello World', {icon: 6});
  });
  </script> 
</body>
</html>

输入后可以看到网页会弹出一个欢迎笑脸标识

全局配置

layui.config(options);

您可以在 Layui 模块使用之前，采用该方法进行一些全局化的基础配置，其支持的属性如下：

layui.config({
base: ‘’ // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
dir: ‘layui/’, // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置
debug: false, // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
});
链接解析
var url = layui.url(href);

参数 href 可选，默认自动读取当前页面 URL（location.href）。该方法用于将一段 URL 链接中的 pathname、search、hash 等属性进行对象化处理，以下是对一个 URL 解析后的返回结果：

// 假设当前页面 url 为： https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/
var url = layui.url();

// url 返回结果为：
{
“pathname”: [“docs”,“base.html”], // 路径
“search”: {“a”:“1”,“c”:“3”}, // 参数
“hash”: { // hash 解析
“path”: [“user”,“set”,“”], // hash 中的路径
“search”: {“id”:“123”}, // hash 中的参数
“hash”: “”, // hash 中的 hash
“href”: “/user/set/id=123/” // hash 中的完整链接
}
}
该方法通常可搭配 location.hash 和 hashchange 事件，或 history.pushState() 和 popstate 事件使用，从而实现单页面应用开发。 Layui 的 AdminUI 主题模板则正是基于该方法完成的路由系统。

本地存储
本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。方法如下：

layui.data(table, settings); 即 localStorage，数据在浏览器中的持久化存储，除非物理删除。
layui.sessionData(table, settings); 即 sessionStorage ，数据在浏览器中的会话性存储，页面关闭后即失效。
两者使用方式完全一致。其中参数 table 为表名，settings 是一个对象，用于设置 key/value。下面以 layui.data() 方法为例：

// 【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。
layui.data(‘test’, {
key: ‘nickname’,
value: ‘张三’
});

// 【删】：删除 test 表的 nickname 字段
layui.data(‘test’, {
key: ‘nickname’,
remove: true
});
layui.data(‘test’, null); // 删除 test 表

// 【改】：同【增】，会覆盖已经存储的数据

// 【查】：向 test 表读取全部的数据
var localTest = layui.data(‘test’);
console.log(localTest.nickname); // 获得“张三”