Alert 提示框

INFO

用于展示重要信息提醒，支持 5 种类型和卡片样式。

基本语法

<c-alert type="类型" title="自定义标题" card>
  提示内容，支持 HTML
</c-alert>

参数说明

参数	类型	默认值	说明
type	string	tip	提示类型：tip / info / question / warning / error
title	string	根据类型	自定义标题，不填则使用默认标题
card	boolean	false	添加此属性启用卡片样式

类型对照表

类型	默认标题	颜色	图标
tip	提醒	绿色 #3A7	📝 笔记本
info	信息	灰色	ℹ️ 信息
question	问题	蓝色 #3AF	❓ 问号
warning	警告	橙色 #F80	⚠️ 警告
error	错误	红色 #F33	❌ 错误

使用示例

示例 1：基本提示

<c-alert type="tip">
  这是一条提醒信息，默认绿色样式。
</c-alert>

示例 2：警告信息

<c-alert type="warning">
  <strong>注意：</strong>此操作不可逆，请谨慎执行。
</c-alert>

示例 3：自定义标题

<c-alert type="info" title="小知识">
  Halo 是一款现代化的开源建站工具，致力于提供最佳的博客体验。
</c-alert>

示例 4：带卡片样式的错误提示

<c-alert type="error" title="连接失败" card>
  无法连接到数据库，请检查配置信息：
  <ul>
    <li>确认数据库服务已启动</li>
    <li>检查用户名和密码是否正确</li>
    <li>验证端口号是否开放</li>
  </ul>
</c-alert>

示例 5：问题提示

<c-alert type="question" title="常见问题">
  为什么我的主题样式没有生效？<br>
  答：请尝试清除浏览器缓存后刷新页面。
</c-alert>

使用效果