一、基本介绍
layui.confirm是layui框架中的一个弹窗组件，用于展示一个确认框，让用户确认是否继续操作。常用于用户提交表单或删除操作前的二次确认。
二、使用方法
1、在页面中引入layui库文件和相关css文件：
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>2、在需要使用layuiconfirm的地方，调用layui.layer.confirm()方法即可。方法格式如下：
layui.layer.confirm('确认提示信息', {
btn: ['确定', '取消'],
icon: 3
}, function(index) {
//确定按钮回调函数
}, function(index) {
//取消按钮回调函数
});代码解释：
- 第1个参数是确认框的提示信息
- 第2个参数是对象，包含弹窗的两个按钮和弹窗的图标样式
- 第3个参数是确定按钮的回调函数，可在函数内编写用户点击确定按钮后的处理逻辑
- 第4个参数是取消按钮的回调函数，可在函数内编写用户点击取消按钮后的处理逻辑
三、参数详解
参数可以通过第2个参数传递，以下是常用参数及其默认值：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| btn | Array/String | [‘确定’, ‘取消’] | 确认框的按钮组，可设置为自定义按钮文本，如：[‘确定’, ‘取消’] 或者只设置单个按钮文本，如：’我知道了’ |
| icon | Number | 3 | 确认框的图标样式，可选值有0 ~ 6。其中0代表感叹号，1代表对号，2代表问号，3代表红色叉叉，4代表绿色对勾，5代表黄色问号，6代表红色锁。 |
| title | String | 确认信息 | 确认框的标题 |
| skin | String | ” | 确认框的皮肤样式，可自定义css样式 |
四、代码示例
下面是一个layuiconfirm的完整代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.confirm详解</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<button id="confirmBtn" class="layui-btn">点击确认</button>
<button id="deleteBtn" class="layui-btn layui-btn-danger">点击删除</button>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer'], function() {
var layer = layui.layer;
//确认按钮事件
$('#confirmBtn').click(function() {
layer.confirm('您确认要进行提交吗？', {
icon: 0,
title: '确认提交',
skin: 'my-skin'
}, function(index) {
layer.close(index);
//提交表单逻辑
layer.msg('已成功提交表单',{
icon:1,
time:2000
});
}, function(index) {
layer.close(index);
//取消提交逻辑
});
});
//删除按钮事件
$('#deleteBtn').click(function() {
layer.confirm('您确认要进行删除吗？', {
btn: ['确认删除', '暂不操作'],
icon: 2,
title: '确认删除',
skin: 'my-skin'
}, function(index) {
layer.close(index);
//删除逻辑
layer.msg('删除成功', {
icon: 1,
time: 2000
});
}, function(index) {
layer.close(index);
//取消删除逻辑
});
});
});
</script>
</body>
</html>代码解释：我们在页面中引入layui库文件和相关的css文件，并添加两个按钮，分别是“点击确认”按钮和“点击删除”按钮。在js代码中，我们先通过layui.use()方法引入了layer模块，并对按钮添加了点击事件。通过使用layer.confirm()方法弹出确认框，让用户确认是否执行提交或删除操作。弹窗弹出后，用户点击任意按钮后都会触发回调函数。弹窗图标、标题、按钮组等都可以根据需求自定义设置。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245617.html
微信扫一扫 
支付宝扫一扫 