logo
简体中文

导航菜单

文档

Alert

简介

Alert 组件用于向用户显示重要的提示信息，支持多种类型的提示样式和交互效果。

案例

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

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

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

<template>
  <Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
</template>

Props

class

自定义 CSS 类名，用于覆盖默认样式。

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert class="my-alert-class" type="info">自定义 class 的 Alert</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info">未设置 class 的 Alert</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert class="my-alert-class" type="info">自定义 class 的 Alert</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info">未设置 class 的 Alert</Alert>
</template>

closable

是否可关闭，设置为 false 时隐藏关闭按钮。

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" closable={true}>可关闭的提示信息</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" closable={false}>不可关闭的提示信息</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" :closable="true">可关闭的提示信息</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" :closable="false">不可关闭的提示信息</Alert>
</template>

marginY

垂直方向外边距大小，支持预设的尺寸值。

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" marginY="xs">marginY="xs" - 超小间距的提示信息</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="success" marginY="sm">marginY="sm" - 小间距的成功提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" marginY="md">marginY="md" - 中等间距的警告提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="error" marginY="lg">marginY="lg" - 大间距的错误提示</Alert>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" marginY="xl">marginY="xl" - 超大间距的信息提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" marginY="xs">marginY="xs" - 超小间距的提示信息</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="success" marginY="sm">marginY="sm" - 小间距的成功提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" marginY="md">marginY="md" - 中等间距的警告提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="error" marginY="lg">marginY="lg" - 大间距的错误提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" marginY="xl">marginY="xl" - 超大间距的信息提示</Alert>
</template>

showIcon

是否显示图标，设置为 false 时隐藏类型对应的图标。

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" showIcon={true}>显示图标的信息提示</Alert>


---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" showIcon={false}>不显示图标的警告提示</Alert>


<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" :showIcon="true">显示图标的信息提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" :showIcon="false">不显示图标的警告提示</Alert>
</template>

title

提示标题，可选，显示为粗体文本。设置 title 后，可以通过 description 属性添加描述文本。

---


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

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

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info">没有 title 的提示</Alert>

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

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

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info">没有 title 的提示</Alert>
</template>

type

提示类型，影响颜色和图标，支持 info、success、warning、error 四种类型。

---
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>


<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info">这是一条信息提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="success">这是一条成功提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning">这是一条警告提示</Alert>
</template>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="error">这是一条错误提示</Alert>
</template>

variant

样式变体，支持 solid（实心）、outline（描边）、dash（虚线）、soft（柔和）四种风格，涵盖所有类型。

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" variant="solid">这是 Solid 实心风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" variant="solid">这是 Solid 实心风格的提示</Alert>
</template>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="info" variant="outline">这是 Outline 描边风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="info" variant="outline">这是 Outline 描边风格的提示</Alert>
</template>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="warning" variant="dash">这是 Dash 虚线风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="warning" variant="dash">这是 Dash 虚线风格的提示</Alert>
</template>

---
import { Alert } from '@coffic/cosy-ui';
---
<Alert type="success" variant="soft">这是 Soft 柔和风格的提示</Alert>

<script setup lang="ts">
import { Alert } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Alert type="success" variant="soft">这是 Soft 柔和风格的提示</Alert>
</template>

Slots

action

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

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

<Alert type="info" title="自定义操作">
    你可以通过 action slot 在右侧自定义按钮。
    <div slot="action">
        <button
            style="
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 0.875rem;
      "
            onclick="alert('自定义操作')">
            自定义操作
        </button>
    </div>
</Alert>

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

<template>
  <Alert type="info" title="自定义操作">
    你可以通过 action slot 在右侧自定义按钮。
    <template #action>
      <button
        style="
          background-color: #3b82f6;
          color: white;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 0.375rem;
          cursor: pointer;
          font-size: 0.875rem;
        "
        @click="alert('自定义操作')">
        自定义操作
      </button>
    </template>
  </Alert>
</template>

搜索