Alert 提示

用于页面中展示重要的提示信息，支持多种类型和主题。

基础用法

Alert 组件提供四种类型的提示，通过设置 type 属性来改变提示的类型，默认值为 info。

默认提示

成功提示

警告提示

危险提示

信息提示

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>
<template>
  <div class="demo-alert">
    <Alert title="默认提示" />
    <Alert title="成功提示" type="success" />
    <Alert title="警告提示" type="warning" />
    <Alert title="危险提示" type="danger" />
    <Alert title="信息提示" type="info" />
  </div>
</template>

<style scoped>
.demo-alert > * {
  margin-bottom: 20px;
}
</style>

主题

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

默认提示

成功提示

警告提示

危险提示

信息提示

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>
<template>
  <div class="demo-alert">
    <Alert title="默认提示" effect="dark" />
    <Alert title="成功提示" type="success" effect="dark" />
    <Alert title="警告提示" type="warning" effect="dark" />
    <Alert title="危险提示" type="danger" effect="dark" />
    <Alert title="信息提示" type="info" effect="dark" />
  </div>
</template>

<style scoped>
.demo-alert > * {
  margin-bottom: 20px;
}
</style>

带有图标

通过设置 showIcon 属性来显示 Alert 的图标，根据 type 属性自动引入不同的图标。

默认提示

成功提示

警告提示

危险提示

信息提示

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>
<template>
  <div class="demo-alert">
    <Alert title="默认提示" showIcon />
    <Alert title="成功提示" type="success" showIcon />
    <Alert title="警告提示" type="warning" showIcon />
    <Alert title="危险提示" type="danger" showIcon />
    <Alert title="信息提示" type="info" showIcon />
  </div>
</template>

<style scoped>
.demo-alert > * {
  margin-bottom: 20px;
}
</style>

带有描述性文字

通过设置 description 属性可以添加描述性文字，让提示信息更加详细。

默认提示

这是一段关于默认提示的详细描述文本，用于补充说明提示内容。

成功提示

这是一段关于成功提示的详细描述文本，用于补充说明提示内容。

警告提示

这是一段关于警告提示的详细描述文本，用于补充说明提示内容。

危险提示

这是一段关于危险提示的详细描述文本，用于补充说明提示内容。

信息提示

这是一段关于信息提示的详细描述文本，用于补充说明提示内容。

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>
<template>
  <div class="demo-alert">
    <Alert 
      title="默认提示" 
      description="这是一段关于默认提示的详细描述文本，用于补充说明提示内容。"
      showIcon
    />
    <Alert 
      title="成功提示" 
      type="success" 
      description="这是一段关于成功提示的详细描述文本，用于补充说明提示内容。"
      showIcon
    />
    <Alert 
      title="警告提示" 
      type="warning" 
      description="这是一段关于警告提示的详细描述文本，用于补充说明提示内容。"
      showIcon
    />
    <Alert 
      title="危险提示" 
      type="danger" 
      description="这是一段关于危险提示的详细描述文本，用于补充说明提示内容。"
      showIcon
    />
    <Alert 
      title="信息提示" 
      type="info" 
      description="这是一段关于信息提示的详细描述文本，用于补充说明提示内容。"
      showIcon
    />
  </div>
</template>

<style scoped>
.demo-alert > * {
  margin-bottom: 20px;
}
</style>

可关闭的提示

设置 closable 属性可以使 Alert 组件可关闭。默认情况下，Alert 组件是可关闭的。

成功提示

警告提示

危险提示

信息提示

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

const alerts = ref([
  { id: 1, type: 'success', title: '成功提示' },
  { id: 2, type: 'warning', title: '警告提示' },
  { id: 3, type: 'danger', title: '危险提示' },
  { id: 4, type: 'info', title: '信息提示' }
])

const handleClose = (id) => {
  alerts.value = alerts.value.filter(alert => alert.id !== id)
}
</script>
<template>
  <div class="demo-alert">
    <Alert 
      v-for="alert in alerts" 
      :key="alert.id"
      :title="alert.title" 
      :type="alert.type" 
      closable
      @close="handleClose(alert.id)"
    />
  </div>
</template>

<style scoped>
.demo-alert > * {
  margin-bottom: 20px;
}
</style>

居中显示

通过设置 center 属性可以使 Alert 组件的文字居中显示。

居中显示的提示

居中显示的成功提示

居中显示的警告提示

居中显示的危险提示

居中显示的信息提示

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>
<template>
  <div class="demo-alert">
    <Alert title="居中显示的提示" center />
    <Alert title="居中显示的成功提示" type="success" center />
    <Alert title="居中显示的警告提示" type="warning" center />
    <Alert title="居中显示的危险提示" type="danger" center />
    <Alert title="居中显示的信息提示" type="info" center />
  </div>
</template>

<style scoped>
.demo-alert > * {
  margin-bottom: 20px;
}
</style>

Attributes

Alert Attributes

名称	说明	类型	默认值
title	标题	string	—
content	内容（已废弃，请使用 description）	string	—
type	类型	enum - 'primary' | 'success' | 'warning' | 'danger' | 'info'	info
effect	主题	enum - 'light' | 'dark'	light
closable	是否可关闭	boolean	true
showIcon	是否显示图标	boolean	false
center	文字是否居中	boolean	false
description	描述性文字	string	—

Alert Events

名称	说明	类型
close	关闭 Alert 时触发的事件	function() => void

Alert Slots

名称	说明
default	Alert 的描述内容
title	Alert 的标题内容