logo
简体中文
导航

Alert

简介

Alert组件用于向用户显示重要的提示信息，支持多种类型(info/success/warning/error)和自定义样式。

组件特性：

  • 支持四种预设类型，每种类型有对应的图标和颜色
  • 可添加标题使提示更醒目
  • 支持自定义class覆盖默认样式
  • 响应式设计，适配不同屏幕尺寸

基础用法

最简单的提示信息展示：

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';

const handleClose = () => {
  console.log('Alert closed!');
};
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
<script define:vars={{ handleClose }}>
  // 实际的关闭事件由组件内部处理，这里只是为了演示
</script>

带标题的提示

通过title属性添加标题：

---
/**
 * @component Alert.WithTitle
 *
 * @description
 * 带标题的Alert组件示例，展示如何使用title属性添加标题。
 */

import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" title="操作成功">您的操作已成功完成</Alert>

提示类型

Alert组件支持四种预设类型：

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info">这是一条信息提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success">这是一条成功提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning">这是一条警告提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error">这是一条错误提示</Alert>

自定义样式

通过class属性自定义提示框样式：

---
/**
 * @component Alert.CustomStyle
 *
 * @description
 * 展示如何使用class属性自定义Alert组件的样式。
 */

import { Alert } from '@coffic/cosy-ui';
---

<Alert
  type="info"
  class="cosy:bg-purple-100 cosy:text-purple-800 cosy:border-purple-300">
  这是一个自定义样式的提示框
</Alert>

可关闭的提示

通过 closable 属性可以控制提示是否可关闭。默认为 true。

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';

const handleClose = () => {
  console.log('Alert closed!');
};
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
<script define:vars={{ handleClose }}>
  // 实际的关闭事件由组件内部处理，这里只是为了演示
</script>

---
/**
 * @component EAlertNotClosable
 * @description An example of a non-closable Alert.
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" closable={false}> 这是一条不可关闭的警告提示 </Alert>

自定义操作按钮

通过 action slot 可以在 Alert 右侧自定义操作按钮：

---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" title="自定义操作">
  你可以通过 action slot 在右侧自定义按钮。
  <div slot="action">
    <button class="cosy:btn cosy:btn-primary" onclick="alert('自定义操作')"
      >自定义操作</button
    >
  </div>
</Alert>

该 slot 渲染在 Alert 右侧，适合放置自定义按钮或其他操作。

Vue 组件

该组件也支持 Vue，用法如下：

 
<template>
  <Alert type="info" closable @close="handleClose">这是一条信息提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';

const handleClose = () => {
  alert('close');
};
</script>

<template>
  <Alert type="success" title="操作成功">您的操作已成功完成</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <div class="cosy:flex cosy:flex-col cosy:gap-4">
    <Alert type="info" title="提示">这是一条信息提示</Alert>
    <Alert type="success" title="成功">操作已成功完成</Alert>
    <Alert type="warning" title="警告">这是一个警告提示</Alert>
    <Alert type="error" title="错误">发生了一个错误</Alert>
  </div>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Alert
    type="info"
    title="自定义样式"
    class="cosy:border-2 cosy:border-blue-500 cosy:shadow-lg"
  >
    通过 class 属性可以自定义 Alert 的样式
  </Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Alert type="info" title="自定义操作">
        你可以通过 action slot 在右侧自定义按钮。
        <template #action>
            <button class="cosy:btn cosy:btn-primary" @click="handleAction">
                自定义操作
            </button>
        </template>
    </Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';

const handleAction = () => {
    alert('自定义操作');
};
</script>