🔔 系统通知

ThinkAdmin 提供完善的系统通知功能,支持多种通知类型和自定义配置。

🚀 主要功能

  • 多种类型: 支持 alert、success、error、warning、info 等通知类型
  • 灵活位置: 支持多种显示位置配置
  • 自定义样式: 支持自定义宽度、图标等样式
  • 交互控制: 支持点击关闭、按钮关闭等交互方式
  • 动画效果: 支持多种动画效果
  • HTML 支持: 支持 HTML 内容显示

📋 基础参数配置

参数类型默认值说明
widthnumber/stringnull自定义宽度(如 "100px""50%"
zIndexnumber1056通知框的 z-index 层级
typestring'alert'通知类型:alert/success/error/warning/info
positionstring'top-right'显示位置:top-left/top-right/bottom-left/bottom-right/top-center/bottom-center
titlestring''标题(支持HTML,但不要直接传入用户输入)
descriptionstring''内容描述(支持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.visiblebooleanfalse是否显示图标
image.customImagestring''自定义图标路径

交互控制

参数类型默认值说明
closeTimeoutnumber/booleanfalse自动关闭延时(毫秒)
closeWithstring[]['click']关闭触发方式

动画效果

参数类型默认值说明
animation.openstring/null/false'slide-in'打开动画
animation.closestring/null/false'slide-out'关闭动画
最近更新:
Contributors: 邹景立