[TOC] #### 1. Message 消息提示 --- 本文使用的是 Element UI v2.5.13 Message 常用于主动操作后的反馈提示。比如:用于提交表单后的提示,成功或失败 **全局方法** Element 为 Vue.prototype 添加了全局方法 $message,因此可以通过 Vue 实例直接调用 ```javascript export default { methods: { btnClick() { this.$message("消息提示"); } } } ``` **常用参数** 下面最常用的自定义参数及其缺省值,这里写出来,方便以后更快回忆 ```javascript this.$message({ message: "这是一条消息提示", type: "info", //消息类型 center: false, //消息内容是否水平居中 duration: 3000, //显示时常 showClose: false, //是否可以手动关闭 }); ``` #### 2. 不同状态的消息提示 --- **基础用法** 默认出现在页面顶部,并且在 3000 毫秒后自动关闭。**消息提示框** 出现的位置和显示时长都可以通过传入参数自定义 ```javascript this.$message("这是一条消息提示"); ``` **自定义参数** 当需要自定义更多属性时,message 支持传入一个对象作为参数 比如:设置 type 字段可以定义不同的状态,默认为 info,也就是下面两种写法效果相同 ```javascript this.$message("这是一条消息提示"); this.$message({ message: "这是一条消息提示", type: "info", }); ``` Element UI 也为 Message 的各种 type 注册了方法,可以在不传入type字段的情况下使用不同状态的消息提示 ```javascript this.$message.success("成功"); this.$message.error("错误"); this.$message.warning("警告"); ``` #### 3. 可关闭的消息提示框 --- Message 默认是不可以被人工关闭的,使用 `showClose` 字段可以开启人工关闭 ```javascript this.$message({ message: "这是一条消息提示", showClose: true, }); ``` #### 4. 消息提示的显示时长 --- Message 默认显示时长为 3000 毫秒,设置为 0 代表不会自动关闭 ```javascript this.$message({ message: "这是一条消息提示", duration: 3000, }); ``` #### 5. 消息提示内容文字居中 --- Message 消息提示框中文字默认左对齐,设置 `center` 属性可以使其水平居中 ```javascript this.$message({ message: "这是一条消息提示", center: true, }); ```