ThinkAdmin 提供完善的通知系统，支持多种通知类型和自定义配置。
- 多种类型: 支持 alert、success、error、warning、info 等通知类型
- 灵活位置: 支持多种显示位置配置
- 自定义样式: 支持自定义宽度、图标等样式
- 交互控制: 支持点击关闭、按钮关闭等交互方式
- 动画效果: 支持多种动画效果
- HTML 支持: 支持 HTML 内容显示
| 参数 | 类型 | 默认值 | 说明 |
|---|
width | number/string | null | 自定义宽度（如 "100px" 或 "50%"） |
zIndex | number | 1056 | 通知框的 z-index 层级 |
type | string | 'alert' | 通知类型：alert/success/error/warning/info |
position | string | 'top-right' | 显示位置：top-left/top-right/bottom-left/bottom-right/top-center/bottom-center |
title | string | '' | 标题（支持HTML，但不要直接传入用户输入） |
description | string | '' | 内容描述（支持HTML，但不要直接传入用户输入） |
- alert: 警告通知
- success: 成功通知
- error: 错误通知
- warning: 警告通知
- info: 信息通知
- top-left: 左上角
- top-right: 右上角
- bottom-left: 左下角
- bottom-right: 右下角
- top-center: 顶部居中
- bottom-center: 底部居中
- 显示图标: 支持显示自定义图标
- 图标路径: 支持自定义图标路径
- 图标样式: 支持图标样式定制
- 自动关闭: 支持自动关闭功能
- 关闭延时: 可设置自动关闭延时
- 关闭方式: 支持点击关闭、按钮关闭等
- 进入动画: 支持进入动画效果
- 退出动画: 支持退出动画效果
- 动画时长: 可自定义动画时长
| 参数 | 类型 | 默认值 | 说明 |
|---|
image.visible | boolean | false | 是否显示图标 |
image.customImage | string | '' | 自定义图标路径（如 "img/info.png"） |
| 参数 | 类型 | 默认值 | 说明 |
|---|
closeTimeout | number/boolean | false | 自动关闭延时（毫秒），false 表示不自动关闭 |
closeWith | string[] | ['click'] | 关闭触发方式：click（点击关闭）/button（按钮关闭） |
| 参数 | 类型 | 默认值 | 说明 |
|---|
animation.open | string/null/false | 'slide-in' | 打开动画：slide-in/fade-in，false 表示无动画 |
animation.close | string/null/false | 'slide-out' | 关闭动画：slide-out/fade-out，false 表示无动画 |
$.msg.notify("title", "content", 3000, {
type: 'info',
showProgress: true,
position: 'bottom-right',
animation: {
open: 'fade-in',
close: 'slide-out'
},
image: {
visible: true,
customImage: '/static/plugs/notify/img/danger.png'
},
showButtons: true,
buttons: {
action: {
text: 'Ok', // 确认按钮文本
callback: function(event) { // 确认回调函数
console.log('Ok');
$.form.open("{:url('@admin/oplog/index')}"); // 仅供参考,具体以实际需要为准
}
},
cancel: {
text: 'Cancel', // 取消按钮文本
callback: function(event) { // 取消回调函数
console.log('Cancel');
}
}
}
});
如有错误，可随时联系微信群 Mian L ，如有不严谨或者不规范的地方欢迎指正。
