Alert 提示

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

基础用法

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

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

<template>
  <h2>通过 slot 传入内容</h2>
  <div style="max-width: 600px">
    <x-alert type="success">Success alert</x-alert>
    <x-alert type="info">Info alert</x-alert>
    <x-alert type="warning">Warning alert</x-alert>
    <x-alert type="danger">Error alert</x-alert>
  </div>
  <h2>通过 prop 传入内容</h2>
  <div style="max-width: 600px">
    <x-alert type="success" title="Success alert" />
    <x-alert type="info" title="Info alert" />
    <x-alert type="warning" title="Warning alert" />
    <x-alert type="danger" title="Error alert" />
  </div>
</template>

主题

通过设置 effect 属性来改变主题(light|dark)，默认为 light。

<template>
  <div style="max-width: 600px">
    <x-alert title="Success Alert" type="success" effect="dark" />
    <x-alert title="Info Alert" type="info" effect="dark" />
    <x-alert title="Warning Alert" type="warning" effect="dark" />
    <x-alert title="Error Alert" type="danger" effect="dark" />
  </div>
</template>

不可关闭

可以设置 Alert 组件是否为可关闭状态， closable 属性决定 Alert 组件是否可关闭， 该属性接受一个 Boolean，默认为 false。

<script setup>
// import { XMessage } from 'x-anything'

function handleClose() {
  // XMessage.info('close callback')
  console.log('close callback')
}
</script>
<template>
  <div class="basic block">
    <x-alert title="Unclosable alert" type="success" :closable="false" />
    <x-alert title="Alert with callback" type="warning" @close="handleClose" />
  </div>
</template>

展示图标

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

<template>
  <div style="max-width: 600px">
    <x-alert title="Success alert" type="success" show-icon />
    <x-alert title="Info alert" type="info" show-icon />
    <x-alert title="Warning alert" type="warning" show-icon />
    <x-alert title="Error alert" type="danger" show-icon />
  </div>
</template>

文字居中

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

<template>
  <div style="max-width: 600px">
    <x-alert title="Success alert" type="success" center show-icon />
    <x-alert title="Info alert" type="info" center show-icon />
    <x-alert title="Warning alert" type="warning" center show-icon />
    <x-alert title="Error alert" type="danger" center show-icon />
  </div>
</template>

文字描述

除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。

<template>
  <div style="max-width: 600px">
    <x-alert
      title="With description"
      type="success"
      description="This is a description."
    />
  </div>
</template>

带图标和描述

<template>
  <div style="max-width: 600px">
    <x-alert
      title="Success alert"
      type="success"
      description="More text description"
      show-icon
    />
    <x-alert
      title="Info alert"
      type="info"
      description="More text description"
      show-icon
    />
    <x-alert
      title="Warning alert"
      type="warning"
      description="More text description"
      show-icon
    />
    <x-alert
      title="Error alert"
      type="danger"
      description="More text description"
      show-icon
    />
  </div>
</template>

Alert API

Props

Name	Description	Type	Default
title	Alert 标题	string	—
type	Alert 类型	enum - 'success'| 'warning'| 'danger'| 'info'	info
description	描述性文本	string	—
closable	是否可以关闭	boolean	true
center	文字是否居中	boolean	false
show-icon	是否展示图标	boolean	false
effect	主题样式	enum - 'light'| 'dark'\	light

Events

Name	Description	Type
close	关闭 Alert 时触发的事件	(event: MouseEvent)=> void

Slots

Name	Description
default	默认插槽，用于设置 Alert 的内容描述
title	标题的内容

Expose

Name	Description	Type
open	打开 Alert	() => void
close	关闭 Alert	() => void