logo
English

导航菜单

Documents
Vue

Alert

Introduction

The Alert component is used to display important information to users, supporting various types of alert styles and interactive effects.

Component Features:

  • Supports four preset types, each with corresponding icons and colors
  • Can add titles to make alerts more prominent
  • Supports custom class to override default styles
  • Responsive design that adapts to different screen sizes
  • Can control whether to display icons
  • Supports setting vertical margin
  • Supports multiple style variants
  • Supports v-model two-way binding

Example

<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

Custom CSS class name for overriding default styles.

<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

Whether the alert can be closed, setting to false will hide the close button.

<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

Alert title, optional, displayed as bold text.

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

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

type

Alert type, affects colors and icons, supports info, success, warning, error four types.

<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

Triggered when the close button is clicked.

Slots

default

Alert content, supports any text content.

action

Custom action buttons, displayed on the right side of the Alert, suitable for placing custom buttons or other operations.

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

搜索