1.Alert 警告
用于页面中展示重要的提示信息。
¶ 基本用法
页面中的非浮层元素,不会自动消失。
Alert 组件提供四种主题,由type属性指定,默认值为info。
<template>
<el-alert
title="成功提示的文案"
type="success">
</el-alert>
<el-alert
title="消息提示的文案"
type="info">
</el-alert>
<el-alert
title="警告提示的文案"
type="warning">
</el-alert>
<el-alert
title="错误提示的文案"
type="error">
</el-alert>
</template>
¶ 主题
Alert 组件提供了两个不同的主题:light和dark。
通过设置effect属性来改变主题,默认为light。
<template>
<el-alert
title="成功提示的文案"
type="success"
effect="dark">
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
effect="dark">
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
effect="dark">
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
effect="dark">
</el-alert>
</template>
¶ 带有 icon
表示某种状态时提升可读性。
通过设置show-icon属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。
<template>
<el-alert
title="成功提示的文案"
type="success"
show-icon>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
show-icon>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
show-icon>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
show-icon>
</el-alert>
</template>
¶ 文字居中
使用 center 属性让文字水平居中。
<template>
<el-alert
title="成功提示的文案"
type="success"
center
show-icon>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
center
show-icon>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
center
show-icon>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
center
show-icon>
</el-alert>
</template>
¶ 带有 icon 和辅助性文字介绍
<template>
<el-alert
title="成功提示的文案"
type="success"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
</template>
2.Loading 加载
区域加载(在表格等容器中加载数据时显示)
Element 提供了两种调用 Loading 的方法&