Notification 通知

通知组件，在页面指定位置显示通知消息，支持标题和内容。

基础用法

javascript

SaNotification.info({
  title: '通知',
  message: '这是一条通知消息'
});

html

<button class="sa-button sa-button--primary" onclick="showBasicNotification()">显示通知</button>

<script>
  SA.init('body');
  
  function showBasicNotification() {
    SaNotification.info({
      title: '通知',
      message: '这是一条通知消息'
    });
  }
</script>

加载 SanoUI 组件中...

不同类型

成功通知

javascript

SaNotification.success({
  title: '成功',
  message: '操作成功完成'
});

html

<button class="sa-button sa-button--success" onclick="showSuccessNotification()">成功通知</button>

<script>
  SA.init('body');
  
  function showSuccessNotification() {
    SaNotification.success({
      title: '成功',
      message: '操作成功完成'
    });
  }
</script>

加载 SanoUI 组件中...

信息通知

javascript

SaNotification.info({
  title: '信息',
  message: '这是一条信息提示'
});

html

<button class="sa-button sa-button--info" onclick="showInfoNotification()">信息通知</button>

<script>
  SA.init('body');
  
  function showInfoNotification() {
    SaNotification.info({
      title: '信息',
      message: '这是一条信息提示'
    });
  }
</script>

加载 SanoUI 组件中...

警告通知

javascript

SaNotification.warning({
  title: '警告',
  message: '请注意相关事项'
});

html

<button class="sa-button sa-button--warning" onclick="showWarningNotification()">警告通知</button>

<script>
  SA.init('body');
  
  function showWarningNotification() {
    SaNotification.warning({
      title: '警告',
      message: '请注意相关事项'
    });
  }
</script>

加载 SanoUI 组件中...

错误通知

javascript

SaNotification.error({
  title: '错误',
  message: '操作失败，请重试'
});

html

<button class="sa-button sa-button--danger" onclick="showErrorNotification()">错误通知</button>

<script>
  SA.init('body');
  
  function showErrorNotification() {
    SaNotification.error({
      title: '错误',
      message: '操作失败，请重试'
    });
  }
</script>

加载 SanoUI 组件中...

不同位置

通过 position 配置通知显示位置。

javascript

// 右上角（默认）
SaNotification.info({
  title: '右上角',
  message: '这是右上角的通知',
  position: 'top-right'
});

// 左上角
SaNotification.info({
  title: '左上角',
  message: '这是左上角的通知',
  position: 'top-left'
});

// 右下角
SaNotification.info({
  title: '右下角',
  message: '这是右下角的通知',
  position: 'bottom-right'
});

// 左下角
SaNotification.info({
  title: '左下角',
  message: '这是左下角的通知',
  position: 'bottom-left'
});

html

<div style="display: flex; gap: 10px; flex-wrap: wrap;">
  <button class="sa-button" onclick="showTopRight()">右上角</button>
  <button class="sa-button" onclick="showTopLeft()">左上角</button>
  <button class="sa-button" onclick="showBottomRight()">右下角</button>
  <button class="sa-button" onclick="showBottomLeft()">左下角</button>
</div>

<script>
  SA.init('body');
  
  function showTopRight() {
    SaNotification.info({
      title: '右上角',
      message: '这是右上角的通知',
      position: 'top-right'
    });
  }
  
  function showTopLeft() {
    SaNotification.info({
      title: '左上角',
      message: '这是左上角的通知',
      position: 'top-left'
    });
  }
  
  function showBottomRight() {
    SaNotification.info({
      title: '右下角',
      message: '这是右下角的通知',
      position: 'bottom-right'
    });
  }
  
  function showBottomLeft() {
    SaNotification.info({
      title: '左下角',
      message: '这是左下角的通知',
      position: 'bottom-left'
    });
  }
</script>

加载 SanoUI 组件中...

自定义持续时间

通过 duration 配置通知显示的持续时间。

javascript

SaNotification.info({
  title: '通知',
  message: '这条通知会显示 5 秒',
  duration: 5000
});

// 不自动关闭
SaNotification.info({
  title: '通知',
  message: '这条通知不会自动关闭',
  duration: 0
});

html

<div style="display: flex; gap: 10px; flex-wrap: wrap;">
  <button class="sa-button" onclick="showDuration5s()">显示 5 秒</button>
  <button class="sa-button" onclick="showNoAutoClose()">不自动关闭</button>
</div>

<script>
  SA.init('body');
  
  function showDuration5s() {
    SaNotification.info({
      title: '通知',
      message: '这条通知会显示 5 秒',
      duration: 5000
    });
  }
  
  function showNoAutoClose() {
    SaNotification.info({
      title: '通知',
      message: '这条通知不会自动关闭',
      duration: 0
    });
  }
</script>

加载 SanoUI 组件中...

点击事件

通过 onClick 配置点击通知时的回调。

javascript

SaNotification.info({
  title: '可点击的通知',
  message: '点击查看详情',
  onClick: () => {
    console.log('通知被点击了');
    // 跳转到详情页
    window.location.href = '/detail';
  }
});

html

<button class="sa-button sa-button--primary" onclick="showClickableNotification()">显示可点击通知</button>

<script>
  SA.init('body');
  
  function showClickableNotification() {
    SaNotification.info({
      title: '可点击的通知',
      message: '点击查看详情',
      onClick: () => {
        console.log('通知被点击了');
        alert('通知被点击了！');
      }
    });
  }
</script>

加载 SanoUI 组件中...

关闭回调

通过 onClose 配置关闭通知时的回调。

javascript

SaNotification.info({
  title: '通知',
  message: '关闭时会执行回调',
  onClose: () => {
    console.log('通知已关闭');
  }
});

html

<button class="sa-button sa-button--primary" onclick="showNotificationWithClose()">显示带关闭回调的通知</button>

<script>
  SA.init('body');
  
  function showNotificationWithClose() {
    SaNotification.info({
      title: '通知',
      message: '关闭时会执行回调',
      onClose: () => {
        console.log('通知已关闭');
        alert('通知已关闭！');
      }
    });
  }
</script>

加载 SanoUI 组件中...

API

静态方法

方法名	说明	参数	返回值
`success`	显示成功通知	`config: NotificationOptions`	`void`
`info`	显示信息通知	`config: NotificationOptions`	`void`
`warning`	显示警告通知	`config: NotificationOptions`	`void`
`error`	显示错误通知	`config: NotificationOptions`	`void`
`show`	显示自定义通知	`config: NotificationOptions`	`void`
`closeAll`	关闭所有通知	-	`void`

SaNotification.success(config)

显示成功通知。

示例：

javascript

SaNotification.success({
  title: '成功',
  message: '操作成功完成',
  duration: 3000
});

SaNotification.info(config)

显示信息通知。

示例：

javascript

SaNotification.info({
  title: '信息',
  message: '这是一条信息提示',
  duration: 4500
});

SaNotification.warning(config)

显示警告通知。

示例：

javascript

SaNotification.warning({
  title: '警告',
  message: '请注意相关事项',
  duration: 5000
});

SaNotification.error(config)

显示错误通知。

示例：

javascript

SaNotification.error({
  title: '错误',
  message: '操作失败，请重试',
  duration: 5000
});

SaNotification.show(config)

显示自定义通知，可以指定 type 参数。

示例：

javascript

SaNotification.show({
  type: 'info',
  title: '自定义通知',
  message: '这是自定义类型的通知',
  duration: 3000
});

SaNotification.closeAll()

关闭所有当前显示的通知。适用于需要一次性清除所有通知的场景。

示例：

javascript

// 显示多个通知
SaNotification.info({ title: '通知1', message: '消息1' });
SaNotification.info({ title: '通知2', message: '消息2' });
SaNotification.info({ title: '通知3', message: '消息3' });

// 3秒后关闭所有通知
setTimeout(() => {
  SaNotification.closeAll();
}, 3000);

使用场景：

页面切换时清除所有通知
用户执行某个操作后需要清除所有通知
系统维护时批量关闭通知

配置选项

参数	说明	类型	可选值	默认值
title	通知标题	`string`	-	`''`
message	通知内容	`string`	-	`''`
type	通知类型	`string`	`success` / `info` / `warning` / `error`	`info`
duration	持续时间（毫秒）	`number`	-	`4500`
position	显示位置	`string`	`top-right` / `top-left` / `bottom-right` / `bottom-left`	`top-right`
showClose	是否显示关闭按钮	`boolean`	-	`true`
onClick	点击回调	`function()`	-	-
onClose	关闭回调	`function()`	-	-

示例代码

基本用法

javascript

// 成功通知
SaNotification.success({
  title: '成功',
  message: '操作成功完成'
});

// 信息通知
SaNotification.info({
  title: '信息',
  message: '这是一条信息提示'
});

// 警告通知
SaNotification.warning({
  title: '警告',
  message: '请注意相关事项'
});

// 错误通知
SaNotification.error({
  title: '错误',
  message: '操作失败，请重试'
});

高级用法

javascript

SaNotification.info({
  title: '系统通知',
  message: '您有一条新消息',
  position: 'top-right',
  duration: 5000,
  showClose: true,
  onClick: () => {
    // 跳转到消息中心
    window.location.href = '/messages';
  },
  onClose: () => {
    console.log('通知已关闭');
  }
});

在异步操作中使用

javascript

async function submitForm() {
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData)
    });
    
    if (response.ok) {
      SaNotification.success({
        title: '提交成功',
        message: '您的表单已成功提交',
        duration: 3000
      });
    } else {
      SaNotification.error({
        title: '提交失败',
        message: '请检查表单内容后重试'
      });
    }
  } catch (error) {
    SaNotification.error({
      title: '网络错误',
      message: '请检查网络连接'
    });
  }
}

实际使用场景

场景 1：系统通知

显示系统级别的通知消息。

html

<button class="sa-button sa-button--primary" onclick="showSystemNotification()">显示系统通知</button>

<script>
  SA.init('body');
  
  function showSystemNotification() {
    SaNotification.info({
      title: '系统通知',
      message: '系统将在 10 分钟后进行维护，请及时保存您的工作',
      duration: 0, // 不自动关闭
      onClick: () => {
        console.log('查看维护详情');
      }
    });
  }
</script>

加载 SanoUI 组件中...

场景 2：操作结果通知

在异步操作完成后显示结果通知。

html

<button class="sa-button sa-button--primary" onclick="handleAsyncOperation()">执行操作</button>

<script>
  SA.init('body');
  
  async function handleAsyncOperation() {
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      SaNotification.success({
        title: '操作成功',
        message: '数据已成功保存到服务器',
        duration: 3000
      });
    } catch (error) {
      SaNotification.error({
        title: '操作失败',
        message: '网络错误，请检查连接后重试',
        duration: 5000
      });
    }
  }
</script>

加载 SanoUI 组件中...

Notification 通知 ​

基础用法 ​

不同类型 ​

成功通知 ​

信息通知 ​

警告通知 ​

错误通知 ​

不同位置 ​

自定义持续时间 ​

点击事件 ​

关闭回调 ​

API ​

静态方法 ​

SaNotification.success(config) ​

SaNotification.info(config) ​

SaNotification.warning(config) ​

SaNotification.error(config) ​

SaNotification.show(config) ​

SaNotification.closeAll() ​

配置选项 ​

示例代码 ​

基本用法 ​

高级用法 ​

在异步操作中使用 ​

实际使用场景 ​

场景 1：系统通知 ​

场景 2：操作结果通知 ​

Notification 通知

基础用法

不同类型

成功通知

信息通知

警告通知

错误通知

不同位置

自定义持续时间

点击事件

关闭回调

API

静态方法

SaNotification.success(config)

SaNotification.info(config)

SaNotification.warning(config)

SaNotification.error(config)

SaNotification.show(config)

SaNotification.closeAll()

配置选项

示例代码

基本用法

高级用法

在异步操作中使用

实际使用场景

场景 1：系统通知

场景 2：操作结果通知