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: 底部居中
// 简单通知
$.msg.notify("标题", "内容");
// 带类型的通知
$.msg.notify("成功", "操作成功", 3000, {
type: 'success',
position: 'top-right'
});
$.msg.notify("标题", "内容", 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: '确认',
callback: function(event) {
console.log('确认');
}
},
cancel: {
text: '取消',
callback: function(event) {
console.log('取消');
}
}
}
});
参数 | 类型 | 默认值 | 说明 |
---|
image.visible | boolean | false | 是否显示图标 |
image.customImage | string | '' | 自定义图标路径 |
参数 | 类型 | 默认值 | 说明 |
---|
closeTimeout | number/boolean | false | 自动关闭延时(毫秒) |
closeWith | string[] | ['click'] | 关闭触发方式 |
参数 | 类型 | 默认值 | 说明 |
---|
animation.open | string/null/false | 'slide-in' | 打开动画 |
animation.close | string/null/false | 'slide-out' | 关闭动画 |