MessageBox 彈框

模擬系統的消息提示框而實現的一套模態對話框組件，用于消息提示、確認消息和提交內容。

?從場景上說，MessageBox 的作用是美化系統自帶的?alert、confirm?和?prompt，因此適合展示較為簡單的內容。如果需要彈出較為復雜的內容，請使用 Dialog。

消息提示

當用戶進行操作時會被觸發，該對話框中斷用戶操作，直到用戶確認知曉后才可關閉。

調用$alert方法即可打開消息提示，它模擬了系統的?alert，無法通過按下 ESC 或點擊框外關閉。此例中接收了兩個參數，message和title。值得一提的是，窗口被關閉后，它默認會返回一個Promise對象便于進行后續操作的處理。若不確定瀏覽器是否支持Promise，可自行引入第三方 polyfill 或像本例一樣使用回調進行后續處理。

 1 <template>
 2   <el-button type="text" @click="open">點擊打開 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open() {
 9         this.$alert('這是一段內容', '標題名稱', {
10           confirmButtonText: '確定',
11           callback: action => {
12             this.$message({
13               type: 'info',
14               message: `action: ${ action }`
15             });
16           }
17         });
18       }
19     }
20   }
21 </script>

View Code

確認消息

提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。

調用$confirm方法即可打開消息提示，它模擬了系統的?confirm。Message Box 組件也擁有極高的定制性，我們可以傳入options作為第三個參數，它是一個字面量對象。type字段表明消息類型，可以為success，error，info和warning，無效的設置將會被忽略。注意，第二個參數title必須定義為String類型，如果是Object，會被理解為options。在這里我們用了 Promise 來處理后續響應。

 1 <template>
 2   <el-button type="text" @click="open2">點擊打開 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open2() {
 9         this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {
10           confirmButtonText: '確定',
11           cancelButtonText: '取消',
12           type: 'warning'
13         }).then(() => {
14           this.$message({
15             type: 'success',
16             message: '刪除成功!'
17           });
18         }).catch(() => {
19           this.$message({
20             type: 'info',
21             message: '已取消刪除'
22           });          
23         });
24       }
25     }
26   }
27 </script>

View Code

提交內容

當用戶進行操作時會被觸發，中斷用戶操作，提示用戶進行輸入的對話框。

調用$prompt方法即可打開消息提示，它模擬了系統的?prompt。可以用inputPattern字段自己規定匹配模式，或者用inputValidator規定校驗函數，可以返回Boolean或String，返回false或字符串時均表示校驗未通過，同時返回的字符串相當于定義了inputErrorMessage字段。此外，可以用inputPlaceholder字段來定義輸入框的占位符。

 1 <template>
 2   <el-button type="text" @click="open3">點擊打開 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open3() {
 9         this.$prompt('請輸入郵箱', '提示', {
10           confirmButtonText: '確定',
11           cancelButtonText: '取消',
12           inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
13           inputErrorMessage: '郵箱格式不正確'
14         }).then(({ value }) => {
15           this.$message({
16             type: 'success',
17             message: '你的郵箱是: ' + value
18           });
19         }).catch(() => {
20           this.$message({
21             type: 'info',
22             message: '取消輸入'
23           });       
24         });
25       }
26     }
27   }
28 </script>

View Code

自定義

可自定義配置不同內容。

以上三個方法都是對$msgbox方法的再包裝。本例直接調用$msgbox方法，使用了showCancelButton字段，用于顯示取消按鈕。另外可使用cancelButtonClass為其添加自定義樣式，使用cancelButtonText來自定義按鈕文本（Confirm 按鈕也具有相同的字段，在文末的字段說明中有完整的字段列表）。此例還使用了beforeClose屬性，它的值是一個方法，會在 MessageBox 的實例關閉前被調用，同時暫停實例的關閉。它有三個參數：action、實例本身和done方法。使用它能夠在關閉前對實例進行一些操作，比如為確定按鈕添加loading狀態等；此時若需要關閉實例，可以調用done方法（若在beforeClose中沒有調用done，則實例不會關閉）。

 1 <template>
 2   <el-button type="text" @click="open4">點擊打開 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open4() {
 9         const h = this.$createElement;
10         this.$msgbox({
11           title: '消息',
12           message: h('p', null, [
13             h('span', null, '內容可以是 '),
14             h('i', { style: 'color: teal' }, 'VNode')
15           ]),
16           showCancelButton: true,
17           confirmButtonText: '確定',
18           cancelButtonText: '取消',
19           beforeClose: (action, instance, done) => {
20             if (action === 'confirm') {
21               instance.confirmButtonLoading = true;
22               instance.confirmButtonText = '執行中...';
23               setTimeout(() => {
24                 done();
25                 setTimeout(() => {
26                   instance.confirmButtonLoading = false;
27                 }, 300);
28               }, 3000);
29             } else {
30               done();
31             }
32           }
33         }).then(action => {
34           this.$message({
35             type: 'info',
36             message: 'action: ' + action
37           });
38         });
39       }
40     }
41   }
42 </script>

View Code

使用 HTML 片段

message?屬性支持傳入 HTML 片段

將dangerouslyUseHTMLString屬性設置為 true，message?就會被當作 HTML 片段處理。

 1 <template>
 2   <el-button type="text" @click="open5">點擊打開 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open5() {
 9         this.$alert('<strong>這是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
10           dangerouslyUseHTMLString: true
11         });
12       }
13     }
14   }
15 </script>

View Code

message?屬性雖然支持傳入 HTML 片段，但是在網站上動態渲染任意 HTML 是非常危險的，因為容易導致?XSS 攻擊。因此在?dangerouslyUseHTMLString?打開的情況下，請確保?message?的內容是可信的，永遠不要將用戶提交的內容賦值給?message屬性。

居中布局

內容支持居中布局

將?center?設置為?true?即可開啟居中布局

 1 <template>
 2   <el-button type="text" @click="open6">點擊打開 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open6() {
 9         this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {
10           confirmButtonText: '確定',
11           cancelButtonText: '取消',
12           type: 'warning',
13           center: true
14         }).then(() => {
15           this.$message({
16             type: 'success',
17             message: '刪除成功!'
18           });
19         }).catch(() => {
20           this.$message({
21             type: 'info',
22             message: '已取消刪除'
23           });
24         });
25       }
26     }
27   }
28 </script>

View Code

全局方法

如果你完整引入了 Element，它會為 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本頁面中的方式調用?MessageBox。調用參數為：

$msgbox(options)
$alert(message, title, options)?或?$alert(message, options)
$confirm(message, title, options)?或?$confirm(message, options)
$prompt(message, title, options)?或?$prompt(message, options)

單獨引用

如果單獨引入?MessageBox：

import { MessageBox } from 'element-ui';

那么對應于上述四個全局方法的調用方法依次為：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，調用參數與全局方法相同。

Options

參數	說明	類型	可選值	默認值
title	MessageBox 標題	string	—	—
message	MessageBox 消息正文內容	string / VNode	—	—
dangerouslyUseHTMLString	是否將 message 屬性作為 HTML 片段處理	boolean	—	false
type	消息類型，用于顯示圖標	string	success / info / warning / error	—
customClass	MessageBox 的自定義類名	string	—	—
callback	若不使用 Promise，可以使用此參數指定 MessageBox 關閉后的回調	function(action, instance)，action 的值為'confirm'或'cancel', instance 為 MessageBox 實例，可以通過它訪問實例上的屬性和方法	—	—
showClose	MessageBox 是否顯示右上角關閉按鈕	boolean	—	true
beforeClose	MessageBox 關閉前的回調，會暫停實例的關閉	function(action, instance, done)，action 的值為'confirm'或'cancel'；instance 為 MessageBox 實例，可以通過它訪問實例上的屬性和方法；done 用于關閉 MessageBox 實例	—	—
lockScroll	是否在 MessageBox 出現時將 body 滾動鎖定	boolean	—	true
showCancelButton	是否顯示取消按鈕	boolean	—	false（以 confirm 和 prompt 方式調用時為 true）
showConfirmButton	是否顯示確定按鈕	boolean	—	true
cancelButtonText	取消按鈕的文本內容	string	—	取消
confirmButtonText	確定按鈕的文本內容	string	—	確定
cancelButtonClass	取消按鈕的自定義類名	string	—	—
confirmButtonClass	確定按鈕的自定義類名	string	—	—
closeOnClickModal	是否可通過點擊遮罩關閉 MessageBox	boolean	—	true（以 alert 方式調用時為 false）
closeOnPressEscape	是否可通過按下 ESC 鍵關閉 MessageBox	boolean	—	true（以 alert 方式調用時為 false）
closeOnHashChange	是否在 hashchange 時關閉 MessageBox	boolean	—	true
showInput	是否顯示輸入框	boolean	—	false（以 prompt 方式調用時為 true）
inputPlaceholder	輸入框的占位符	string	—	—
inputType	輸入框的類型	string	—	text
inputValue	輸入框的初始文本	string	—	—
inputPattern	輸入框的校驗表達式	regexp	—	—
inputValidator	輸入框的校驗函數。可以返回布爾值或字符串，若返回一個字符串, 則返回結果會被賦值給 inputErrorMessage	function	—	—
inputErrorMessage	校驗未通過時的提示文本	string	—	輸入的數據不合法!
center	是否居中布局	boolean	—	false
roundButton	是否使用圓角按鈕	boolean	—	false