Alert 警告

用于页面中的警告、通知、提示信息展示。

基础用法

通过 type 属性设置不同的警告类型。

成功提示

警告提示

信息提示

错误提示

<template>
  <ZcAlert type="success" title="成功提示" />
  <ZcAlert type="warning" title="警告提示" />
  <ZcAlert type="info" title="信息提示" />
  <ZcAlert type="error" title="错误提示" />
</template>

带描述的警告

通过 description 属性添加辅助文字说明。

成功提示恭喜你，你的操作已成功完成。

警告提示请注意，此操作可能会产生不可逆的影响。

<template>
  <ZcAlert type="success" title="成功提示" description="恭喜你，你的操作已成功完成。" show-icon />
  <ZcAlert
    type="warning"
    title="警告提示"
    description="请注意，此操作可能会产生不可逆的影响。"
    show-icon
  />
</template>

主题与居中

使用 effect 属性切换主题，center 属性居中内容。

成功提示

信息提示

居中提示

<template>
  <ZcAlert type="success" title="成功提示" effect="dark" show-icon />
  <ZcAlert type="info" title="信息提示" effect="dark" show-icon />
  <ZcAlert type="warning" title="居中提示" center show-icon />
</template>

自定义关闭按钮

通过 close-text 自定义关闭按钮文字，或通过 closable 控制是否可关闭。

不可关闭

自定义关闭文字

<template>
  <ZcAlert type="info" title="不可关闭" :closable="false" />
  <ZcAlert type="success" title="自定义关闭文字" close-text="知道了" />
</template>

Alert API

Props

参数	说明	类型	默认值
type	Alert 类型	'success' | 'warning' | 'info' | 'error'	'info'
title	标题	string	''
description	辅助文字	string	''
showIcon	是否显示图标	boolean	false
center	是否居中	boolean	false
closable	是否可关闭	boolean	true
closeText	关闭按钮文字	string	''
effect	主题样式	'light' | 'dark'	'light'

Events

事件名	说明	回调参数
close	关闭 Alert 时触发	(event: MouseEvent)

Slots

插槽名	说明
default	自定义内容