Alert 警告

用于页面中展示重要的提示信息。

基础用法

页面中的非浮层元素，不会自动消失。 Alert 组件提供四种主题，由type属性指定，默认值为info。

成功提示的文案

消息提示的文案

警告提示的文案

错误提示的文案

<template>
  <Alert content="成功提示的文案" type="success"> </Alert>
  <Alert content="消息提示的文案"> </Alert>
  <Alert content="警告提示的文案" type="warning"> </Alert>
  <Alert content="错误提示的文案" type="danger"> </Alert>
</template>

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>

<style scoped>
.s-alert {
  margin: 20px 0;
}
</style>

主题

Alert 组件提供了两个不同的主题：light和dark。通过设置effect属性来改变主题，默认为light。

成功提示的文案

消息提示的文案

警告提示的文案

错误提示的文案

<template>
  <Alert content="成功提示的文案" type="success" effect="dark"> </Alert>
  <Alert content="消息提示的文案" effect="dark"> </Alert>
  <Alert content="警告提示的文案" type="warning" effect="dark"> </Alert>
  <Alert content="错误提示的文案" type="danger" effect="dark"> </Alert>
</template>

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>

<style scoped>
.s-alert {
  margin: 20px 0;
}
</style>

使用图标

你可以通过为 Alert 组件添加图标来提高可读性。

通过设置 show-icon 属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。

成功提示的文案

消息提示的文案

警告提示的文案

错误提示的文案

<template>
  <Alert content="成功提示的文案" type="success" show-icon> </Alert>
  <Alert content="消息提示的文案" show-icon> </Alert>
  <Alert content="警告提示的文案" type="warning" show-icon> </Alert>
  <Alert content="错误提示的文案" type="danger" show-icon> </Alert>
</template>

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>

<style scoped>
.s-alert {
  margin: 20px 0;
}
</style>

Alert Attributes

参数	说明	类型	可选值	默认值
title	标题	string	—	—
type	主题	string	success/warning/info/error	info
effect	选择提供的主题	string	light/dark	light
description	辅助性文字。也可通过默认 slot 传入	string	—	—
closable	是否可关闭	boolean	—	true
close-text	关闭按钮自定义文本	string	—	—
center	文字是否居中	boolean	—	false
show-icon	是否显示图标	boolean	—	false
close-text	关闭按钮自定义文本	string	—	—
center	文字是否居中	boolean	—	false