Alert 警告

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

基础用法

通过 type 指定不同的主题色，使用 closable 控制是否可关闭，effect 指定浅色或深色主题。

这是一条 Primary 提示

这是一条 Success 提示

深色 Warning 提示

可关闭的 Danger 提示

基础用法

Alert 组件的基础用法

<script setup lang="ts">
import Alert from '@/components/Alert/Alert.vue'
</script>

<template>
  <Alert type="primary" content="这是一条 Primary 提示" />
  <Alert type="success">这是一条 Success 提示</Alert>
  <Alert type="warning" effect="dark">深色 Warning 提示</Alert>
  <Alert type="danger" closable>可关闭的 Danger 提示</Alert>
</template>

关闭事件

设置 closable 后，用户点击关闭图标会触发 close 事件。

这是可关闭的提示，关闭后可点击按钮恢复。

关闭事件

Alert close 事件

<script setup lang="ts">
import { ref } from 'vue'
import Alert from '@/components/Alert/Alert.vue'
import Button from '@/components/Button/Button.vue'

const visible = ref(true)

const handleClose = () => {
  visible.value = false
  console.log('alert close')
}

const reset = () => {
  visible.value = true
}
</script>

<template>
  <Alert v-if="visible" type="warning" closable @close="handleClose">
    这是可关闭的提示，关闭后可点击按钮恢复。
  </Alert>

  <Button v-else type="primary" @click="reset">重新显示 Alert</Button>
</template>

API

Alert Attributes

参数	说明	类型	默认值
content	提示内容（也可以用默认插槽）	string	-
type	主题类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	primary
effect	主题风格	'light' | 'dark'	light
closable	是否可关闭	boolean	false

Alert Events

事件名	说明	回调参数
close	关闭时触发	-