Element框架之Notice-Alert警告 Element框架之Notice-Alert警告

1.Alert 警告
用于页面中展示重要的提示信息。
? 基本用法
页面中的非浮层元素，不会自动消失。

文章图片

Alert 组件提供四种主题，由type属性指定，默认值为info。

? 主题
Alert 组件提供了两个不同的主题：light和dark。

文章图片

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

? 带有 icon
表示某种状态时提升可读性。

文章图片

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

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

文章图片

? 带有 icon 和辅助性文字介绍

文章图片

2.Loading 加载
区域加载（在表格等容器中加载数据时显示）

文章图片

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

body { margin: 0; }

【Element框架之Notice-Alert警告】? 自定义
可自定义加载文案、图标和背景色。

文章图片

在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

? 整页加载
页面数据加载时显示。

文章图片

文章图片

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

? 服务
Loading 还可以以服务的方式调用。引入 Loading 服务：

import { Loading } from 'element-ui';

在需要调用时：

Loading.service(options);

文章图片

3.Message 消息提示
? 基础用法
从顶部出现，3 秒后自动消失。

文章图片

文章图片

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

? 不同状态
用来显示「成功、警告、消息、错误」类的操作反馈。

文章图片

文章图片

当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入type字段的情况下像open4那样直接调用。

? 可关闭
可以添加关闭按钮。

文章图片

文章图片

默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用showClose字段。此外，和 Notification 一样，Message 拥有可控的duration，设置0为不会被自动关闭，默认为 3000 毫

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

文章图片

? 使用 HTML 片段
message 属性支持传入 HTML 片段

文章图片

文章图片

将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。

文章图片

4.MessageBox 弹框
? 消息提示
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

文章图片

文章图片

调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

? 确认消息
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

文章图片

文章图片

调用$confirm方法即可打开消息提示，它模拟了系统的 confirm。Message Box 组件也拥有极高的定制性，我们可以传入options作为第三个参数，它是一个字面量对象。type字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数title必须定义为String类型，如果是Object，会被理解为options。在这里我们用了 Promise 来处理后续响应。

? 提交内容
当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。

文章图片

文章图片

? 区分取消与关闭
有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。

文章图片

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。

? 居中布局
内容支持居中布局