Alert 警告提示

用于页面中展示重要的提示信息。

基础用法

<div class="sa-alert" data-alert data-title="提示" data-description="这是一条提示信息" data-type="info"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

不同类型

支持 4 种类型：success、warning、info、error。

<!-- 成功提示 -->
<div class="sa-alert" 
     data-alert 
     data-type="success" 
     data-title="成功提示" 
     data-description="这是一条成功提示信息">
</div>

<!-- 警告提示 -->
<div class="sa-alert" 
     data-alert 
     data-type="warning" 
     data-title="警告提示" 
     data-description="这是一条警告提示信息">
</div>

<!-- 信息提示 -->
<div class="sa-alert" 
     data-alert 
     data-type="info" 
     data-title="信息提示" 
     data-description="这是一条信息提示">
</div>

<!-- 错误提示 -->
<div class="sa-alert" 
     data-alert 
     data-type="error" 
     data-title="错误提示" 
     data-description="这是一条错误提示信息">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

可关闭

通过 data-closable="true" 启用关闭按钮。

<div class="sa-alert" 
     data-alert 
     data-type="success" 
     data-title="可关闭的提示" 
     data-description="点击右侧关闭按钮可以关闭此提示"
     data-closable="true">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

不同效果

浅色背景

默认效果，使用浅色背景。

<div class="sa-alert sa-alert--success" 
     data-alert 
     data-title="浅色背景" 
     data-description="这是默认的浅色背景效果">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

深色背景

添加 sa-alert--dark 类使用深色背景。

<div class="sa-alert sa-alert--success sa-alert--dark" 
     data-alert 
     data-title="深色背景" 
     data-description="这是深色背景效果">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaAlertOptions	{}

配置选项

参数	说明	类型	可选值	默认值
type	提示类型	string	success / warning / info / error	info
title	标题	string	-	''
description	描述内容	string	-	''
closable	是否可关闭	boolean	-	false
effect	显示效果	string	light / dark	light
onClose	关闭回调	function()	-	-

方法

方法名	说明	参数	返回值
close	关闭提示	-	void
destroy	销毁实例	-	void

自动初始化属性

属性	说明	类型	默认值
class="sa-alert"	启用自动初始化	-	-
data-alert	启用自动初始化标记	boolean	-
data-type	提示类型	string	info
data-title	标题	string	''
data-description	描述内容	string	''
data-closable	是否可关闭	boolean	false

示例代码

手动创建实例

const alert = new SaAlert('#my-alert', {
  type: 'success',
  title: '成功提示',
  description: '操作成功！',
  closable: true,
  onClose: () => {
    console.log('提示已关闭');
  }
});

// 关闭提示
alert.close();

自动初始化

<div class="sa-alert" 
     data-alert 
     data-type="success" 
     data-title="成功提示" 
     data-description="操作成功！"
     data-closable="true">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

实际使用场景

场景 1：表单验证提示

在表单验证失败时显示错误提示。

<form id="alert-form" style="max-width: 500px;">
  <div class="sa-alert" 
       id="form-alert"
       data-alert 
       data-type="error" 
       data-title="表单验证失败" 
       data-description="请检查以下错误："
       data-closable="true"
       style="display: none; margin-bottom: 1rem;">
  </div>
  
  <div class="sa-input" data-placeholder="用户名" data-autocomplete="off" style="width: 100%; margin-bottom: 1rem;"></div>
  <div class="sa-input" data-placeholder="密码" data-type="password" data-autocomplete="off" style="width: 100%; margin-bottom: 1rem;"></div>
  
  <button type="submit" class="sa-button sa-button--primary">提交</button>
</form>

<script>
  SA.init('body');
  
  document.getElementById('alert-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const alert = document.getElementById('form-alert');
    const alertInstance = alert._saAlertInstance;
    
    if (alertInstance) {
      alertInstance.setDescription('用户名和密码不能为空');
      alert.style.display = 'block';
    }
  });
</script>

加载 SanoUI 组件中...

场景 2：操作成功提示

在操作成功后显示成功提示。

<div class="sa-alert" 
     id="success-alert"
     data-alert 
     data-type="success" 
     data-title="操作成功" 
     data-description="数据已成功保存"
     data-closable="true"
     style="display: none;">
</div>

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

<script>
  SA.init('body');
  
  function showSuccessAlert() {
    const alert = document.getElementById('success-alert');
    const alertInstance = alert._saAlertInstance;
    
    if (alertInstance) {
      alert.style.display = 'block';
      // 3秒后自动关闭
      setTimeout(() => {
        alertInstance.close();
      }, 3000);
    }
  }
</script>

加载 SanoUI 组件中...