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

主题

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

Success Alert

Info Alert

Warning Alert

Error Alert

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

不可关闭

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

Unclosable alert

Alert with callback

<script setup>
	import { VrMessage } from 'veyra'

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

展示图标

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

Success alert

Info alert

Warning alert

Error alert

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

文字居中

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

Success alert

Info alert

Warning alert

Error alert

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

文字描述

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

With description

This is a description.

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

带图标和描述

Success alert

More text description

Info alert

More text description

Warning alert

More text description

Error alert

More text description

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

显示控制

Open & Close

<script lang="ts" setup>
import { ref } from 'vue'

const alertRef = ref(null)

const openAlert = () => {
    if (alertRef.value) {
        // 调用子组件的 open 方法
        alertRef.value.open()
    }
}

const closeAlert = () => {
    if (alertRef.value) {
        // 调用子组件的 close 方法
        alertRef.value.close()
    }
}
</script>

<template>
	<vr-button @click="openAlert">Open Alert</vr-button>
	<vr-button @click="closeAlert">Close Alert</vr-button>

	<vr-alert ref="alertRef" title="Open & Close" show-icon />
</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