Alert 警告

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

基本用法

默认为朴素风格。

查看代码

<template>
	<demo-container class="demo-gov-alert">
		<gov-alert title="消息提示的文案" />
		<gov-alert title="成功提示的文案" type="success" />
		<gov-alert title="警告提示的文案" type="warning" />
		<gov-alert title="危险提示的文案" type="danger" />
	</demo-container>
</template>

朴素风格

查看代码

<template>
	<demo-container class="demo-gov-alert">
		<gov-alert plain title="消息提示的文案" />
		<gov-alert plain title="成功提示的文案" type="success" />
		<gov-alert plain title="警告提示的文案" type="warning" />
		<gov-alert plain title="危险提示的文案" type="danger" />
	</demo-container>
</template>

辅助性文字介绍

查看代码

<template>
	<demo-container class="demo-gov-alert">
		<gov-alert
			plain
			title="秦风·蒹葭"
			description="蒹葭苍苍，白露为霜。所谓伊人，在水一方。"
		/>
		<gov-alert
			plain
			type="success"
			title="秦风·蒹葭"
			description="蒹葭苍苍，白露为霜。所谓伊人，在水一方。"
		/>
	</demo-container>
</template>

带有Icon

查看代码

<template>
	<demo-container class="demo-gov-alert">
		<gov-alert plain showIcon title="消息提示的文案" />
		<gov-alert plain showIcon title="成功提示的文案" type="success" />
		<gov-alert plain showIcon title="警告提示的文案" type="warning" />
		<gov-alert plain showIcon title="危险提示的文案" type="danger" />
		<gov-alert
			showIcon
			title="秦风·蒹葭"
			description="蒹葭苍苍，白露为霜。所谓伊人，在水一方。"
		/>
	</demo-container>
</template>

自定义内容

你可以在默认插槽内自定义html。

查看代码

<template>
	<demo-container class="demo-gov-alert">
		<gov-alert showIcon title="提示">
			蒹葭<sub><i>(一种植物)</i> </sub>
			苍苍，白露为霜。所谓伊人，在水一方。<br />
			溯洄从之,道阻且长;溯游从之,宛在水中央。
		</gov-alert>
	</demo-container>
</template>

Attributes

属性名	说明	类型	可选值	默认值
title	警告框的标题	String	—	—
description	警告框的详细描述	String	—	—
type	警告框的类型	String	info, success, warning, danger	info
plain	是否为朴素风格	Boolean	true, false	false
closable	是否可关闭	Boolean	true, false	true
closeText	关闭按钮的文本	String	—	—
showIcon	是否显示图标	Boolean	true, false	true
center	内容是否居中	Boolean	true, false	false

Slots

插槽名	说明
title	用于自定义警告框的标题内容。
default	当没有提供 description 属性时，可以放置默认的警告内容。

Events

事件名	说明
close	关闭事件。