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

?從場景上說，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

?

轉載于:https://www.cnblogs.com/grt322/p/8564437.html

總結

以上是生活随笔為你收集整理的MessageBox 弹框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。