[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, }); ```