Alert 提示

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

基础用法

Alert 组件不属于浮层元素，不会自动消失或关闭。

Alert 组件提供四种类型，由 type 属性指定，为 success | warning | danger | info , 默认值为 info。

通过 slot 传入内容

Success alert

Info alert

Warning alert

Error alert

通过 prop 传入内容

Success alert

Info alert

Warning alert

Error alert

<template>
  <h3>通过 slot 传入内容</h3>
  <div>
    <XuAlert type="success">
      Success alert
    </XuAlert>
    <XuAlert type="info">
      Info alert
    </XuAlert>
    <XuAlert type="warning">
      Warning alert
    </XuAlert>
    <XuAlert type="danger">
      Error alert
    </XuAlert>
  </div>
  <h3>通过 prop 传入内容</h3>
  <div>
    <XuAlert type="success" title="Success alert" />
    <XuAlert type="info" title="Info alert" />
    <XuAlert type="warning" title="Warning alert" />
    <XuAlert type="danger" title="Error alert" />
  </div>
</template>

不同类型

Alert 组件提供了 6 种不同的类型，由 type 属性指定。

成功提示

信息提示

警告提示

危险提示

<template>
  <div>
    <XuAlert type="success" title="成功提示" />
    <XuAlert type="info" title="信息提示" />
    <XuAlert type="warning" title="警告提示" />
    <XuAlert type="danger" title="危险提示" />
  </div>
</template>

主题效果

Alert 组件支持两种主题效果：light（浅色）和 dark（深色）。

浅色主题效果

成功提示

警告提示

危险提示

深色主题效果

成功提示

警告提示

危险提示

<template>
  <h3>浅色主题效果</h3>
  <div>
    <XuAlert type="success" effect="light" title="成功提示" />
    <XuAlert type="warning" effect="light" title="警告提示" />
    <XuAlert type="danger" effect="light" title="危险提示" />
  </div>

  <h3>深色主题效果</h3>
  <div>
    <XuAlert type="success" effect="dark" title="成功提示" />
    <XuAlert type="warning" effect="dark" title="警告提示" />
    <XuAlert type="danger" effect="dark" title="危险提示" />
  </div>
</template>

可关闭的警告提示

设置 closable 属性可以显示关闭按钮，点击后警告提示会隐藏。

可关闭的警告提示

可关闭的成功提示

可关闭的警告提示

不可关闭的提示

<template>
  <h3>可关闭的警告提示</h3>
  <div>
    <XuAlert
      type="success"
      title="可关闭的成功提示"
      :closable="true"
      :on-close="handleClose"
    />
    <XuAlert
      type="warning"
      title="可关闭的警告提示"
      :closable="true"
    />
    <XuAlert
      type="info"
      title="不可关闭的提示"
      :closable="false"
    />
  </div>
</template>

<script setup>
const handleClose = () => {
  alert('警告提示已关闭')
}
</script>

居中文字

使用 center 属性可以让文字水平居中。

居中标题

文字内容居中对齐显示

默认对齐方式

文字内容默认左对齐显示

居中长标题示例

这是一个较长的描述内容，用于展示居中对齐效果

<template>
  <div>
    <XuAlert
      type="success"
      title="居中标题"
      description="文字内容居中对齐显示"
      :center="true"
    />
    <XuAlert
      type="warning"
      title="默认对齐方式"
      description="文字内容默认左对齐显示"
    />
    <XuAlert
      type="info"
      title="居中长标题示例"
      description="这是一个较长的描述内容，用于展示居中对齐效果"
      :center="true"
    />
  </div>
</template>

自定义内容

通过插槽可以自定义警告提示的内容。

自定义标题内容

自定义成功标题

这是自定义的描述内容

⚠️自定义警告标题

自定义警告描述内容

自定义描述内容

信息提示

这是第一段自定义描述

这是第二段较小的描述文字

<template>
  <h3>自定义标题内容</h3>
  <div>
    <XuAlert type="success">
      <template #title>
        <span style="color: #67c23a; font-weight: bold">自定义成功标题</span>
      </template>
      <template #default>
        这是自定义的描述内容
      </template>
    </XuAlert>

    <XuAlert type="warning">
      <template #title>
        <div style="display: flex; align-items: center; gap: 8px">
          <span style="color: #e6a23c">⚠️</span>
          <span>自定义警告标题</span>
        </div>
      </template>
      自定义警告描述内容
    </XuAlert>
  </div>

  <h3>自定义描述内容</h3>
  <div>
    <XuAlert type="info" title="信息提示">
      <template #default>
        <div>
          <p>这是第一段自定义描述</p>
          <p style="color: #909399; font-size: 12px">
            这是第二段较小的描述文字
          </p>
        </div>
      </template>
    </XuAlert>
  </div>
</template>

使用图标

设置 showIcon 属性可以显示与类型对应的图标。

带图标的成功提示

带图标的警告提示

不带图标的危险提示

信息提示

<template>
  <div>
    <XuAlert
      type="success"
      title="带图标的成功提示"
      :show-icon="true"
    />
    <XuAlert
      type="warning"
      title="带图标的警告提示"
      :show-icon="true"
    />
    <XuAlert
      type="danger"
      title="不带图标的危险提示"
      :show-icon="false"
    />
    <XuAlert
      type="info"
      title="信息提示"
    />
  </div>
</template>

通过 ref 控制显示/隐藏

可以通过 ref 调用组件的方法来控制警告提示的显示和隐藏。

可控制的警告提示

可以通过按钮控制显示/隐藏

<template>
  <div>
    <XuAlert
      ref="alertRef"
      type="success"
      title="可控制的警告提示"
      description="可以通过按钮控制显示/隐藏"
    />

    <div style="margin-top: 16px; display: flex; gap: 8px">
      <XuButton type="success" @click="showAlert">
        显示警告
      </XuButton>
      <XuButton type="danger" @click="hideAlert">
        隐藏警告
      </XuButton>
      <XuButton type="primary" @click="toggleAlert">
        切换显示
      </XuButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const alertRef = ref()

const showAlert = () => {
  alertRef.value?.open()
  console.log('显示警告提示')
}

const hideAlert = () => {
  alertRef.value?.close()
  console.log('隐藏警告提示')
}

const toggleAlert = () => {
  // 这里需要根据实际情况判断当前状态，简单实现切换
  alertRef.value?.close()
  setTimeout(() => {
    alertRef.value?.open()
  }, 500)
}
</script>

Alert API

Alert Attributes

参数	说明	类型	默认值	可选值
type	警告提示类型	string	'info'	'success', 'warning', 'danger', 'error', 'non-compliance'
title	警告提示标题	string	-	-
description	警告提示描述内容	string	-	-
closable	是否显示关闭按钮	boolean	true	-
showIcon	是否显示图标	boolean	-	-
center	文字是否居中	boolean	-	-
effect	主题效果	string	'light'	'light', 'dark'
onClose	关闭时触发的回调函数	Function	-	-

Alert Slots

插槽名	说明
default	自定义描述内容
title	自定义标题内容

Alert Methods

通过 ref 可以调用以下方法：

方法名	说明	参数
close()	关闭警告提示	-
open()	打开警告提示	-