SanoUI

Appearance

Message 消息提示 ​

消息提示组件，用于显示操作反馈信息，支持成功、信息、警告、错误四种类型。

基础用法 ​

成功提示 ​

javascript
SaTip.success('操作成功！');
html
<button class="sa-button sa-button--success" onclick="showSuccess()">成功提示</button>

<script>
  SA.init('body');
  
  function showSuccess() {
    SaTip.success('操作成功！');
  }
</script>
加载 SanoUI 组件中...

信息提示 ​

javascript
SaTip.info('这是一条信息提示');
html
<button class="sa-button sa-button--info" onclick="showInfo()">信息提示</button>

<script>
  SA.init('body');
  
  function showInfo() {
    SaTip.info('这是一条信息提示');
  }
</script>
加载 SanoUI 组件中...

警告提示 ​

javascript
SaTip.warning('请注意：这是一条警告消息');
html
<button class="sa-button sa-button--warning" onclick="showWarning()">警告提示</button>

<script>
  SA.init('body');
  
  function showWarning() {
    SaTip.warning('请注意：这是一条警告消息');
  }
</script>
加载 SanoUI 组件中...

错误提示 ​

javascript
SaTip.error('操作失败，请重试');
html
<button class="sa-button sa-button--danger" onclick="showError()">错误提示</button>

<script>
  SA.init('body');
  
  function showError() {
    SaTip.error('操作失败，请重试');
  }
</script>
加载 SanoUI 组件中...

自定义持续时间 ​

通过第二个参数或配置对象自定义消息显示的持续时间（毫秒）。

javascript
// 显示 5 秒
SaTip.success('这条消息会显示 5 秒', 5000);

// 不自动关闭
SaTip.info('这条消息不会自动关闭', 0);

// 使用配置对象
SaTip.show({
  type: 'success',
  content: '自定义持续时间',
  duration: 3000
});
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>
  <button class="sa-button" onclick="showCustomDuration()">自定义 3 秒</button>
</div>

<script>
  SA.init('body');
  
  function showDuration5s() {
    SaTip.success('这条消息会显示 5 秒', 5000);
  }
  
  function showNoAutoClose() {
    SaTip.info('这条消息不会自动关闭', 0);
  }
  
  function showCustomDuration() {
    SaTip.show({
      type: 'success',
      content: '自定义持续时间',
      duration: 3000
    });
  }
</script>
加载 SanoUI 组件中...

不可关闭 ​

通过 closable: false 可以禁用关闭按钮。

javascript
SaTip.show({
  type: 'info',
  content: '这条消息没有关闭按钮',
  closable: false,
  duration: 3000
});
html
<button class="sa-button sa-button--primary" onclick="showNotClosable()">显示不可关闭消息</button>

<script>
  SA.init('body');
  
  function showNotClosable() {
    SaTip.show({
      type: 'info',
      content: '这条消息没有关闭按钮',
      closable: false,
      duration: 3000
    });
  }
</script>
加载 SanoUI 组件中...

手动关闭 ​

调用 show() 方法会返回一个对象，包含 close() 方法用于手动关闭消息。

javascript
const message = SaTip.show({
  type: 'info',
  content: '这条消息可以手动关闭',
  duration: 0
});

// 3秒后手动关闭
setTimeout(() => {
  message.close();
}, 3000);
html
<button class="sa-button sa-button--primary" onclick="showManualClose()">显示可手动关闭消息</button>

<script>
  SA.init('body');
  
  let messageInstance = null;
  
  function showManualClose() {
    if (messageInstance) {
      messageInstance.close();
      messageInstance = null;
      return;
    }
    
    messageInstance = SaTip.show({
      type: 'info',
      content: '这条消息可以手动关闭，点击按钮关闭',
      duration: 0
    });
  }
</script>
加载 SanoUI 组件中...

关闭回调 ​

通过 onClose 回调函数可以在消息关闭时执行自定义操作。

javascript
SaTip.show({
  type: 'success',
  content: '消息关闭后会执行回调',
  duration: 2000,
  onClose: (isTimeout) => {
    console.log(isTimeout ? '自动关闭' : '手动关闭');
  }
});
html
<button class="sa-button sa-button--primary" onclick="showWithCallback()">显示带回调消息</button>

<script>
  SA.init('body');
  
  function showWithCallback() {
    SaTip.show({
      type: 'success',
      content: '消息关闭后会执行回调',
      duration: 2000,
      onClose: (isTimeout) => {
        alert(isTimeout ? '自动关闭' : '手动关闭');
      }
    });
  }
</script>
加载 SanoUI 组件中...

API ​

静态方法 ​

方法名说明参数返回值
success显示成功消息content: string, duration?: numberMessageInstance
info显示信息消息content: string, duration?: numberMessageInstance
warning显示警告消息content: string, duration?: numberMessageInstance
error显示错误消息content: string, duration?: numberMessageInstance
show显示自定义消息config: MessageOptionsMessageInstance

配置选项 ​

参数说明类型可选值默认值
type消息类型stringsuccess / info / warning / errorinfo
content消息内容string-''
duration持续时间（毫秒）number-2600
closable是否可关闭boolean-true
onClose关闭回调function(isTimeout: boolean)--

MessageInstance 方法 ​

方法名说明参数返回值
close关闭消息-void
element消息元素-HTMLElement

示例代码 ​

基本用法 ​

javascript
// 成功提示
SaTip.success('操作成功！');

// 信息提示
SaTip.info('这是一条信息提示');

// 警告提示
SaTip.warning('请注意相关事项');

// 错误提示
SaTip.error('操作失败，请重试');

高级用法 ​

javascript
// 自定义配置
const message = SaTip.show({
  type: 'success',
  content: '操作成功完成',
  duration: 3000,
  closable: true,
  onClose: (isTimeout) => {
    if (isTimeout) {
      console.log('消息自动关闭');
    } else {
      console.log('消息手动关闭');
    }
  }
});

// 手动关闭
setTimeout(() => {
  message.close();
}, 2000);

在异步操作中使用 ​

javascript
async function saveData() {
  try {
    const response = await fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify(data)
    });
    
    if (response.ok) {
      SaTip.success('保存成功！');
    } else {
      SaTip.error('保存失败，请重试');
    }
  } catch (error) {
    SaTip.error('网络错误，请检查连接');
  }
}

实际使用场景 ​

场景 1：表单提交反馈 ​

在表单提交后显示成功或失败消息。

html
<button class="sa-button sa-button--primary" onclick="handleSubmit()">提交表单</button>

<script>
  SA.init('body');
  
  async function handleSubmit() {
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 提交成功
      SaTip.success('表单提交成功！');
    } catch (error) {
      // 提交失败
      SaTip.error('提交失败，请重试');
    }
  }
</script>
加载 SanoUI 组件中...

场景 2：批量操作反馈 ​

在执行批量操作时显示进度和结果。

html
<button class="sa-button sa-button--primary" onclick="handleBatchOperation()">批量删除</button>

<script>
  SA.init('body');
  
  async function handleBatchOperation() {
    const loadingMsg = SaTip.info('正在删除...', 0);
    
    try {
      // 模拟批量删除
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      loadingMsg.close();
      SaTip.success('已成功删除 10 条记录');
    } catch (error) {
      loadingMsg.close();
      SaTip.error('删除失败：' + error.message);
    }
  }
</script>
加载 SanoUI 组件中...

Released under the MIT License.

Copyright © 2025 SanoUI