Element UI 消息提示 Message_element-ui message

1. Message 消息提示

---

本文使用的是 Element UI v2.5.13

Message 常用于主动操作后的反馈提示。比如：用于提交表单后的提示，成功或失败

全局方法

Element 为 Vue.prototype 添加了全局方法 $message，因此可以通过 Vue 实例直接调用

1. export default {
2. methods: {
3. btnClick() {
4. this.$message("消息提示");
5. }
6. }
7. }

常用参数

下面最常用的自定义参数及其缺省值，这里写出来，方便以后更快回忆

1. this.$message({
2. message: "这是一条消息提示",
3. type: "info", //消息类型
4. center: false, //消息内容是否水平居中
5. duration: 3000, //显示时常
6. showClose: false, //是否可以手动关闭
7. });

2. 不同状态的消息提示

---

基础用法

默认出现在页面顶部，并且在 3000 毫秒后自动关闭。消息提示框 出现的位置和显示时长都可以通过传入参数自定义

1. this.$message("这是一条消息提示");

自定义参数

当需要自定义更多属性时，message 支持传入一个对象作为参数

比如：设置 type 字段可以定义不同的状态，默认为 info，也就是下面两种写法效果相同

1. this.$message("这是一条消息提示");
3. this.$message({
4. message: "这是一条消息提示",
5. type: "info",
6. });

Element UI 也为 Message 的各种 type 注册了方法，可以在不传入type字段的情况下使用不同状态的消息提示

1. this.$message.success("成功");
2. this.$message.error("错误");
3. this.$message.warning("警告");

3. 可关闭的消息提示框

---

Message 默认是不可以被人工关闭的，使用 showClose 字段可以开启人工关闭

1. this.$message({
2. message: "这是一条消息提示",
3. showClose: true,
4. });

4. 消息提示的显示时长

---

Message 默认显示时长为 3000 毫秒，设置为 0 代表不会自动关闭

1. this.$message({
2. message: "这是一条消息提示",
3. duration: 3000,
4. });

5. 消息提示内容文字居中

---

Message 消息提示框中文字默认左对齐，设置 center 属性可以使其水平居中

1. this.$message({
2. message: "这是一条消息提示",
3. center: true,
4. });