Element框架之Notice-Alert警告

最新推荐文章于 2025-03-26 11:04:59 发布

模特

最新推荐文章于 2025-03-26 11:04:59 发布

阅读量3k

点赞数

本文链接：https://blog.youkuaiyun.com/woshierdanya/article/details/98854712

版权

本文详细介绍了Element框架中的警告组件Alert，包括基本用法、不同主题和带有icon的展示。接着讨论了加载组件Loading，展示了自定义加载文案、图标和背景色的方法，以及全屏加载的实现。此外，还讲解了Message消息提示的多种状态、可关闭功能以及支持HTML片段的特性。最后提到了MessageBox弹框，包括消息提示、确认消息和提交内容的功能，以及如何区分取消与关闭的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 的方法&