logo
简体中文

导航菜单

文档
Vue

Alert

简介

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

组件特性：

  • 支持四种预设类型，每种类型有对应的图标和颜色
  • 可添加标题使提示更醒目
  • 支持自定义 class 覆盖默认样式
  • 响应式设计，适配不同屏幕尺寸
  • 可控制是否显示图标
  • 支持设置垂直方向外边距
  • 支持多种样式变体
  • 支持 v-model 双向绑定

案例

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

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

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

Props

class

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

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

<template>
    <Alert type="info" class="cosy:bg-primary cosy:text-primary-content">
        这是一条带有自定义样式的提示信息
    </Alert>
</template>

closable

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

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

/**
 * @component AlertVueClosableTrue
 * @description 展示 AlertVue 组件的可关闭功能。
 */

const handleClose = () => {
    alert('关闭了');
};
</script>

<template>
    <Alert type="info" closable @close="handleClose">
        这是可关闭的提示信息
    </Alert>
</template>

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

/**
 * @component AlertVueClosableFalse
 * @description 展示 AlertVue 组件的不可关闭功能。
 */
</script>

<template>
    <Alert type="warning" :closable="false">
        这是不可关闭的提示信息
    </Alert>
</template>

title

提示标题，可选，显示为粗体文本。

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

<template>
    <Alert type="success" title="操作成功">
        您的操作已成功完成，请查看结果。
    </Alert>
</template>

type

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

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

/**
 * @component AlertVueTypesInfo
 * @description 展示 AlertVue 组件的信息类型。
 */
</script>

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

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

/**
 * @component AlertVueTypesSuccess
 * @description 展示 AlertVue 组件的成功类型。
 */
</script>

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

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

/**
 * @component AlertVueTypesWarning
 * @description 展示 AlertVue 组件的警告类型。
 */
</script>

<template>
    <Alert type="warning" title="警告">这是一个警告提示</Alert>
</template>

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

/**
 * @component AlertVueTypesError
 * @description 展示 AlertVue 组件的错误类型。
 */
</script>

<template>
    <Alert type="error" title="错误">发生了一个错误</Alert>
</template>

Emits

close

当点击关闭按钮时触发。

Slots

default

提示内容，支持任意文本内容。

action

自定义操作按钮，显示在 Alert 右侧，适合放置自定义按钮或其他操作。

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

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

<template>
    <Alert type="info">
        这是带自定义操作的提示
        <template #action>
            <button @click="handleAction" class="cosy:btn cosy:btn-sm cosy:btn-primary">
                操作
            </button>
        </template>
    </Alert>
</template>

搜索