[TOC] #### 1. Message 消息提示 --- 本文使用的是 Element UI v2.5.13 Message 常用于主動(dòng)操作后的反饋提示。比如：用于提交表單后的提示，成功或失敗 **全局方法** Element 為 Vue.prototype 添加了全局方法 $message，因此可以通過 Vue 實(shí)例直接調(diào)用 ```javascript export default { methods: { btnClick() { this.$message("消息提示"); } } } ``` **常用參數(shù)** 下面最常用的自定義參數(shù)及其缺省值，這里寫出來，方便以后更快回憶 ```javascript this.$message({ message: "這是一條消息提示", type: "info", //消息類型 center: false, //消息內(nèi)容是否水平居中 duration: 3000, //顯示時(shí)常 showClose: false, //是否可以手動(dòng)關(guān)閉 }); ``` #### 2. 不同狀態(tài)的消息提示 --- **基礎(chǔ)用法** 默認(rèn)出現(xiàn)在頁面頂部，并且在 3000 毫秒后自動(dòng)關(guān)閉。**消息提示框** 出現(xiàn)的位置和顯示時(shí)長(zhǎng)都可以通過傳入?yún)?shù)自定義 ```javascript this.$message("這是一條消息提示"); ``` **自定義參數(shù)** 當(dāng)需要自定義更多屬性時(shí)，message 支持傳入一個(gè)對(duì)象作為參數(shù) 比如：設(shè)置 type 字段可以定義不同的狀態(tài)，默認(rèn)為 info，也就是下面兩種寫法效果相同 ```javascript this.$message("這是一條消息提示"); this.$message({ message: "這是一條消息提示", type: "info", }); ``` Element UI 也為 Message 的各種 type 注冊(cè)了方法，可以在不傳入type字段的情況下使用不同狀態(tài)的消息提示 ```javascript this.$message.success("成功"); this.$message.error("錯(cuò)誤"); this.$message.warning("警告"); ``` #### 3. 可關(guān)閉的消息提示框 --- Message 默認(rèn)是不可以被人工關(guān)閉的，使用 `showClose` 字段可以開啟人工關(guān)閉 ```javascript this.$message({ message: "這是一條消息提示", showClose: true, }); ``` #### 4. 消息提示的顯示時(shí)長(zhǎng) --- Message 默認(rèn)顯示時(shí)長(zhǎng)為 3000 毫秒，設(shè)置為 0 代表不會(huì)自動(dòng)關(guān)閉 ```javascript this.$message({ message: "這是一條消息提示", duration: 3000, }); ``` #### 5. 消息提示內(nèi)容文字居中 --- Message 消息提示框中文字默認(rèn)左對(duì)齊，設(shè)置 `center` 屬性可以使其水平居中 ```javascript this.$message({ message: "這是一條消息提示", center: true, }); ```