一、基本介紹
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/zh-hant/n/245617.html
微信掃一掃 
支付寶掃一掃 