### `layer.msg` 的功能与使用方法
`layer.msg` 是 Layui 框架中 layer 模块提供的一种轻量级的消息提示组件，常用于在页面上展示短暂的提示信息，例如操作成功、加载中、警告等提示。它支持自定义图标、显示时间、样式、遮罩层、按钮交互等，适用于多种交互场景[^1]。
#### 基本使用方式
最简单的调用方式如下：
```javascript
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('这是一个提示消息');
});
```
该调用会显示一个默认样式的消息框，并在 3 秒后自动关闭。
#### 自定义配置
`layer.msg` 支持丰富的配置参数，常见参数如下：
- `time`：自动关闭时间（单位：毫秒）
- `icon`：图标样式（0~16）
- `shade`：遮罩层透明度
- `btn`：添加按钮
- `yes`：点击确定按钮的回调函数
- `success`：弹出层加载完成后的回调函数
##### 示例：带倒计时的消息提示
以下代码展示如何使用 `layer.msg` 实现倒计时功能：
```javascript
layui.use('layer', function(){
var layer = layui.layer;
layer.msg("正在执行，倒计时", {
time: 20000,
shade: 0.6,
success: function (layero, index) {
var msg = layero.text();
var i = 20;
var timer = null;
var fn = function () {
layero.find(".layui-layer-content").text(msg + '(' + i + ')');
if (!i) {
layer.close(index);
clearInterval(timer);
}
i--;
};
timer = setInterval(fn, 1000);
fn();
}
}, function () {
alert("倒计时执行完成");
});
});
```
此代码会在页面上显示一个带倒计时的消息框，并在倒计时结束后执行回调函数。
##### 示例：带按钮和 AJAX 请求的消息提示
以下代码展示如何在点击按钮后发起 AJAX 请求：
```javascript
function Freeze(collateralId) {
layer.msg('<span style="display:block;margin: auto;text-align: center;">请选择解冻方式</span>', {
icon: 3,
title: '提示',
time: 60000,
area: ['350px', '200px'],
btn: ['抵扣车款', '违约金', '取消'],
yes: function (index, layero) {
$.ajax({
url: prefix + "/edit",
type: "post",
data: {
collateralId: collateralId,
useType: 2
}
});
parent.location.reload();
return true;
},
btn2: function (index, layero) {
$.ajax({
url: prefix + "/edit",
type: "post",
data: {
collateralId: collateralId,
useType: 3
}
});
parent.layer.close(index);
return true;
}
});
}
```
该示例展示了一个带按钮的提示框，并在用户点击按钮后执行对应的 AJAX 请求[^2]。
##### 示例：在 AJAX 请求中使用 `layer.msg` 显示加载状态
```javascript
$.ajax({
beforeSend: function () {
layer.msg('加载中...', {
icon: 16,
time: 0,
shade: 0.5
});
},
url: '/api/data',
success: function (res) {
layer.closeAll('msg'); // 关闭所有提示消息
// 处理返回数据
}
});
```
此代码在 AJAX 请求开始前显示加载提示，并在请求完成后关闭提示[^3]。
#### 注意事项
- `layer.msg` 的默认关闭时间为 3 秒，若希望手动控制关闭，可将 `time` 设为 0。
- 若需在提示关闭后执行操作，可传入回调函数。
- 使用 `layer.close(index)` 可手动关闭指定的提示框。
- 多个提示框同时存在时，建议使用 `layer.closeAll()` 或 `layer.closeAll('msg')` 关闭所有提示。
由于博客内容、目录均缺失，无法提炼关键信息形成摘要。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1053
