一、什么是Layui提示框
Layui提示框是一款基于layui框架的组件，可以用来弹出消息、警告、成功等类型的提示框，让网站的信息交互更加丰富。
Layui提示框的特点如下：
1、弹框样式简洁大方，易于用户使用；
2、支持多种类型的提示框，警告、成功、错误、提问等；
3、支持自定义提示框的标题、内容、按钮等属性；
4、支持定时关闭提示框、回调函数等功能。
二、怎么使用Layui提示框
1、引入Layui框架和提示框组件
在HTML文件中，需要先引入Layui框架和提示框组件的JS和CSS文件：
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
2、调用Layui提示框组件
在页面中需要用到提示框组件的地方，调用相应的函数，比如调用一个简单的警告提示框：
// 弹出一个警告框
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('这是一个警告！');
});
layer.msg()是一个常用的函数，它接受一个字符串类型的参数，用来提示用户相应的信息。在使用之前，需要先使用layui.use()函数加载layer组件。
除了警告提示框，还可以使用layer.msg()函数弹出几乎任意类型的提示框。比如使用以下代码可以弹出一个成功提示框：
// 弹出一个成功框
layer.msg('保存成功！', {icon: 1});
其中，{icon: 1}是一个配置项，用来设置提示框的图标。在这个例子中，设置了{icon: 1}，表示使用成功的图标。
3、自定义Layui提示框
除了使用系统自带的样式，我们还可以使用自定义的样式来展示提示框，通过以下方式自定义一个提示框：
// 自定义一个提示框
layer.open({
title: '提示', // 自定义标题
content: '是否退出？', // 自定义内容
btn: ['确定', '取消'], // 自定义按钮
yes: function(index, layero){ // 点击确定后的回调
// do something
layer.close(index); //关闭弹框
},
cancel: function(){ // 点击取消后的回调
// do something
}
});
在代码中，我们使用了layer.open()函数来自定义了一个提示框。其中：
title：可以自定义标题。
content：可以自定义提示框中的内容。
btn：可以自定义底部的按钮。
yes：当用户点击确定按钮时，会执行回调函数，可以在回调函数中添加自己的业务逻辑。
cancel：当用户点击取消按钮时，会执行回调函数。
三、结合实例，更好地了解Layui提示框的使用
以下是一个结合实例的完整代码，可以让大家更好地了解Layui提示框的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layui 提示框使用实例</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
</head>
<body style="padding:10px">
<button id="btn1">弹出警告框</button>
<button id="btn2">弹出成功框</button>
<button id="btn3">自定义提示框</button>
<script>
layui.use('layer', function(){
var layer = layui.layer;
// 监听按钮1
$('#btn1').on('click', function(){
layer.msg('这是一个警告！');
});
// 监听按钮2
$('#btn2').on('click', function(){
layer.msg('保存成功！', {icon: 1});
});
// 监听按钮3
$('#btn3').on('click', function(){
layer.open({
title: '提示',
content: '是否退出？',
btn: ['确定', '取消'],
yes: function(index, layero){
layer.close(index);
},
cancel: function(){
}
});
});
});
</script>
</body>
</html>
在这个实例中，我们定义了三个按钮，分别用来弹出警告框、成功框和自定义提示框。点击不同的按钮，会弹出不同类型的提示框。这个实例中的代码基本涵盖了Layui提示框的常用功能，大家可以参考实例代码进行学习和使用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/257091.html
微信扫一扫 
支付宝扫一扫 