首页 / 组件 / 通知消息组件

通知消息组件

全局展示通知提醒信息，在系统右上角弹出通知提示框，用于系统级通知、操作结果反馈等场景。

反馈 信息提示

基础用法

最基本的通知提示，包含标题和内容。

注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。
通知标题
这是一条基础的通知消息，提供重要信息反馈。
HTML 
<div class="notification notification-info">
    <div class="notification-icon">
        <i class="mdi mdi-information-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">通知标题</div>
        <div class="notification-message">这是一条基础的通知消息，提供重要信息反馈。</div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

不同类型

通知消息有四种不同类型：信息、成功、警告和错误。

信息提示
这是一条信息类型的通知，用于一般性提示。
成功提示
这是一条成功类型的通知，表示操作已成功完成。
警告提示
这是一条警告类型的通知，提醒用户需要注意的事项。
错误提示
这是一条错误类型的通知，表示操作出现了问题。
HTML 
<!-- 信息通知 -->
<div class="notification notification-info">
    <div class="notification-icon">
        <i class="mdi mdi-information-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">信息提示</div>
        <div class="notification-message">这是一条信息类型的通知，用于一般性提示。</div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

<!-- 成功通知 -->
<div class="notification notification-success">
    <div class="notification-icon">
        <i class="mdi mdi-check-circle-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">成功提示</div>
        <div class="notification-message">这是一条成功类型的通知，表示操作已成功完成。</div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

<!-- 警告通知 -->
<div class="notification notification-warning">
    <div class="notification-icon">
        <i class="mdi mdi-alert-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">警告提示</div>
        <div class="notification-message">这是一条警告类型的通知，提醒用户需要注意的事项。</div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

<!-- 错误通知 -->
<div class="notification notification-error">
    <div class="notification-icon">
        <i class="mdi mdi-alert-circle-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">错误提示</div>
        <div class="notification-message">这是一条错误类型的通知，表示操作出现了问题。</div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

带操作按钮

通知消息可以包含操作按钮，方便用户直接进行相关操作。

文件上传成功
您的文件已成功上传到云端存储。
存储空间不足
您的云端存储空间即将用尽，建议及时清理。
HTML 
<div class="notification notification-info">
    <div class="notification-icon">
        <i class="mdi mdi-information-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">文件上传成功</div>
        <div class="notification-message">您的文件已成功上传到云端存储。</div>
        <div class="notification-actions">
            <button class="notification-btn">查看详情</button>
            <button class="notification-btn notification-btn-primary">打开文件</button>
        </div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

<div class="notification notification-warning">
    <div class="notification-icon">
        <i class="mdi mdi-alert-outline"></i>
    </div>
    <div class="notification-content">
        <div class="notification-title">存储空间不足</div>
        <div class="notification-message">您的云端存储空间即将用尽，建议及时清理。</div>
        <div class="notification-actions">
            <button class="notification-btn">暂不处理</button>
            <button class="notification-btn notification-btn-primary">升级空间</button>
        </div>
    </div>
    <div class="notification-close">
        <i class="mdi mdi-close"></i>
    </div>
</div>

不同位置

通知消息可以出现在屏幕的不同位置，默认为右上角。

右上角通知
默认位置，适合大多数场景。
左上角通知
适合从左侧开始阅读的用户习惯。
右下角通知
不干扰用户主要视线区域的选择。
左下角通知
适合搭配左侧导航栏的界面。
JavaScript 
// 右上角通知（默认）
notification.open({
    title: '右上角通知',
    message: '默认位置，适合大多数场景。',
    type: 'info',
    position: 'topRight'
});

// 左上角通知
notification.open({
    title: '左上角通知',
    message: '适合从左侧开始阅读的用户习惯。',
    type: 'success',
    position: 'topLeft'
});

// 右下角通知
notification.open({
    title: '右下角通知',
    message: '不干扰用户主要视线区域的选择。',
    type: 'warning',
    position: 'bottomRight'
});

// 左下角通知
notification.open({
    title: '左下角通知',
    message: '适合搭配左侧导航栏的界面。',
    type: 'error',
    position: 'bottomLeft'
});

自定义持续时间

通知消息默认在4.5秒后自动关闭，可以自定义持续时间。

短暂通知
该通知会在2秒后自动关闭。
默认通知
该通知会在4.5秒后自动关闭。
较长通知
该通知会在10秒后自动关闭。
永久通知
该通知不会自动关闭，需要用户手动关闭。
JavaScript 
// 2秒后关闭
notification.open({
    title: '短暂通知',
    message: '该通知会在2秒后自动关闭。',
    type: 'info',
    duration: 2000
});

// 默认4.5秒关闭
notification.open({
    title: '默认通知',
    message: '该通知会在4.5秒后自动关闭。',
    type: 'success'
});

// 10秒后关闭
notification.open({
    title: '较长通知',
    message: '该通知会在10秒后自动关闭。',
    type: 'warning',
    duration: 10000
});

// 不自动关闭
notification.open({
    title: '永久通知',
    message: '该通知不会自动关闭，需要用户手动关闭。',
    type: 'error',
    duration: 0  // 设置为0表示不自动关闭
});

API

通知消息组件的属性说明。

属性 说明 类型 默认值
title 通知标题 string -
message 通知内容 string -
type 通知类型，可选值：info、success、warning、error string info
duration 自动关闭的延时，单位毫秒。设为 0 则不自动关闭 number 4500
position 弹出位置，可选值：topRight、topLeft、bottomRight、bottomLeft string topRight
closable 是否显示关闭按钮 boolean true
showIcon 是否显示图标 boolean true
onClose 点击关闭按钮时的回调函数 function -
onClick 点击通知时的回调函数 function -