layui-layer 开源项目使用教程

2026-01-18 09:31:52作者：齐添朝

项目介绍

layui-layer 是一个功能丰富且样式多样的 Web 弹出层组件库。它设计用于简化弹出式交互的开发工作，支持 Alert、Confirm、Prompt 以及普通提示、页面区块、嵌入 iframe、tips 等多种场景。以其简洁的 API 和高度的定制性， layui-layer 已经成为众多开发者首选的弹层解决方案。

项目快速启动

要快速开始使用 layui-layer，首先确保你的项目中已经引入了 layui 的核心文件及 layer 组件。以下是一个基础示例，展示了如何在网页中显示一个简单的提示信息：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>layui-layer 快速启动</title>
    <!-- 引入 layui 核心文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>
</head>
<body>

<button class="layui-btn" id="demo">弹出提示</button>

<script>
    layui.use('layer', function(){
        var layer = layui.layer;
        
        // 执行一个基本的提示
        document.getElementById('demo').onclick = function(){
            layer.msg('Hello, layui-layer!');
        };
    });
</script>

</body>
</html>

这段代码引入了 layui 的 CSS 和 JS 文件，通过 JavaScript 初始化了一个按钮点击事件，当按钮被点击时，会调用 layer 的 msg 方法显示一条消息。

应用案例和最佳实践

基本对话框

展示一个确认对话框可以这样做：

layer.confirm('你确定要执行这个操作吗？', {icon: 3}, function(index){
    // 这里处理确认操作
    layer.close(index); // 关闭对话框
});

自定义样式

可以自定义层的样式，如调整宽度，背景色等，例如：

layer.open({
    type: 1,
    title: '自定义对话框',
    skin: 'layui-layer-rim', //加上边框
    area: ['400px', '300px'], //宽高
    content: '<p>这里是你的自定义内容。</p>',
    btn: ['确定', '取消'],
    yes: function(index, layero){
        // 执行确认按钮的操作
        layer.close(index);
    },
    no: function(index){
        // 取消按钮的操作
        layer.close(index);
    }
});

典型生态项目

虽然 layui-layer 主要作为一个独立的弹层库，但它广泛应用于各种 Web 项目中，尤其在基于 layui 的框架或项目中更为常见。它与 layui 的其他组件一起，构建了许多企业级管理系统的前端界面。由于它不特定绑定于某个大型生态系统，因此其自身并未直接提及典型生态项目。然而，任何需要丰富弹出交互体验的 web 应用，尤其是那些利用 layui 构建的后台管理系统，都可视为它的典型应用场景。

以上就是 layui-layer 的简要介绍、快速启动指南、应用实例及其通用生态的概述。开发者可以根据自己的需求灵活运用，为项目增添更多互动性。

layer

丰富多样的 Web 弹出层组件，可轻松实现 Alert/Confirm/Prompt/ 普通提示/页面区块/iframe/tips等等几乎所有的弹出交互。目前已成为最多人使用的弹层解决方案

项目地址：https://gitcode.com/gh_mirrors/la/layer

登录后查看全文