1. MessageBox彈框

1.1. MessageBox彈框, 模擬系統(tǒng)的消息提示框而實現(xiàn)的一套模態(tài)對話框組件, 用于消息提示、確認消息和提交內(nèi)容。

1.2. 從場景上說, MessageBox的作用是美化系統(tǒng)自帶的alert、confirm和prompt, 因此適合展示較為簡單的內(nèi)容。如果需要彈出較為復雜的內(nèi)容, 請使用Dialog。

1.3. Options

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

2. MessageBox彈框全局方法

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

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

3. MessageBox彈框單獨引用

3.1. 如果單獨引入MessageBox:

import { MessageBox } from 'element-ui';MessageBox(options) MessageBox.alert(message, title, options) 或 MessageBox.alert(message, options) MessageBox.confirm(message, title, options) 或 MessageBox.confirm(message, options) MessageBox.prompt(message, title, options) 或 MessageBox.prompt(message, options)

4. MessageBox彈框例子

4.1. 使用腳手架新建一個名為element-ui-messagebox的前端項目, 同時安裝Element插件。

4.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import AlertMessageBox from '../components/AlertMessageBox.vue' import ConfirmMessageBox from '../components/ConfirmMessageBox.vue' import PromptMessageBox from '../components/PromptMessageBox.vue' import Msgbox from '../components/Msgbox.vue' import HtmlMessageBox from '../components/HtmlMessageBox.vue' import CancelCloseMessageBox from '../components/CancelCloseMessageBox.vue' import CenterMessageBox from '../components/CenterMessageBox.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/AlertMessageBox' },{ path: '/AlertMessageBox', component: AlertMessageBox },{ path: '/ConfirmMessageBox', component: ConfirmMessageBox },{ path: '/PromptMessageBox', component: PromptMessageBox },{ path: '/Msgbox', component: Msgbox },{ path: '/HtmlMessageBox', component: HtmlMessageBox },{ path: '/CancelCloseMessageBox', component: CancelCloseMessageBox },{ path: '/CenterMessageBox', component: CenterMessageBox } ]const router = new VueRouter({routes })export default router

4.3. 在components下創(chuàng)建AlertMessageBox.vue

<template><div><h1>消息提示</h1><h4>調(diào)用$alert方法即可打開消息提示, 它模擬了系統(tǒng)的alert, 無法通過按下ESC或點擊框外關(guān)閉。此例中接收了兩個參數(shù), message和title。值得一提的是, 窗口被關(guān)閉后, 它默認會返回一個Promise對象便于進行后續(xù)操作的處理。若不確定瀏覽器是否支持Promise, 可自行引入第三方polyfill或像本例一樣使用回調(diào)進行后續(xù)處理。</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {this.$alert('這是一段內(nèi)容', '標題名稱', {confirmButtonText: '確定',callback: action => {this.$message({type: 'info',message: `action: ${action}`})}})}} } </script>

4.4. 在components下創(chuàng)建ConfirmMessageBox.vue

<template><div><h1>確認消息</h1><h4>調(diào)用$confirm方法即可打開消息提示, 它模擬了系統(tǒng)的confirm。Message Box組件也擁有極高的定制性, 我們可以傳入options作為第三個參數(shù), 它是一個字面量對象。type字段表明消息類型, 可以為success、error、info和warning, 無效的設(shè)置將會被忽略。注意, 第二個參數(shù)title必須定義為String類型, 如果是Object, 會被理解為options。在這里我們用了Promise來處理后續(xù)響應。</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '刪除成功!'})}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})}} } </script>

4.5. 在components下創(chuàng)建PromptMessageBox.vue

<template><div><h1>提交內(nèi)容</h1><h4>調(diào)用$prompt方法即可打開消息提示, 它模擬了系統(tǒng)的prompt。可以用inputPattern字段自己規(guī)定匹配模式, 或者用inputValidator規(guī)定校驗函數(shù), 可以返回Boolean或String, 返回false或字符串時均表示校驗未通過, 同時返回的字符串相當于定義了inputErrorMessage字段。此外, 可以用inputPlaceholder字段來定義輸入框的占位符。</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {this.$prompt('請輸入郵箱', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: '郵箱格式不正確'}).then(({ value }) => {this.$message({type: 'success',message: '你的郵箱是: ' + value})}).catch(() => {this.$message({type: 'info',message: '取消輸入'})})}} } </script>

4.6. 在components下創(chuàng)建Msgbox.vue

<template><div><h1>自定義</h1><h4>以上三個方法都是對$msgbox方法的再包裝。本例直接調(diào)用$msgbox方法, 使用了showCancelButton字段，用于顯示取消按鈕。另外可使用cancelButtonClass為其添加自定義樣式，使用cancelButtonText來自定義按鈕文本(Confirm按鈕也具有相同的字段, 在文末的字段說明中有完整的字段列表)。此例還使用了beforeClose屬性, 它的值是一個方法, 會在MessageBox的實例關(guān)閉前被調(diào)用, 同時暫停實例的關(guān)閉。它有三個參數(shù): action、實例本身和done方法。使用它能夠在關(guān)閉前對實例進行一些操作, 比如為確定按鈕添加loading狀態(tài)等; 此時若需要關(guān)閉實例, 可以調(diào)用done方法(若在beforeClose中沒有調(diào)用done, 則實例不會關(guān)閉)。</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {const h = this.$createElementthis.$msgbox({title: '消息',message: h('p', null, [h('span', null, '內(nèi)容可以是 '),h('i', { style: 'color: teal' }, 'VNode')]),showCancelButton: true,confirmButtonText: '確定',cancelButtonText: '取消',beforeClose: (action, instance, done) => {if (action === 'confirm') {instance.confirmButtonLoading = trueinstance.confirmButtonText = '執(zhí)行中...'setTimeout(() => {done()setTimeout(() => {instance.confirmButtonLoading = false}, 300)}, 3000)} else {done()}}}).then(action => {this.$message({type: 'info',message: 'action: ' + action})})}} } </script>

4.7. 在components下創(chuàng)建HtmlMessageBox.vue

<template><div><h1>使用HTML片段</h1><h4>將dangerouslyUseHTMLString屬性設(shè)置為true, message就會被當作HTML片段處理。</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {this.$alert('<strong>這是 <i>HTML</i> 片段</strong>', 'HTML 片段', {dangerouslyUseHTMLString: true})}} } </script>

4.8. 在components下創(chuàng)建CancelCloseMessageBox.vue

<template><div><h1>區(qū)分取消與關(guān)閉-有些場景下, 點擊取消按鈕與點擊關(guān)閉按鈕有著不同的含義</h1><h4>默認情況下, 當用戶觸發(fā)取消(點擊取消按鈕)和觸發(fā)關(guān)閉(點擊關(guān)閉按鈕或遮罩層、按下ESC鍵)時, Promise的reject回調(diào)和callback回調(diào)的參數(shù)均為'cancel'。如果將distinguishCancelAndClose屬性設(shè)置為true, 則上述兩種行為的參數(shù)分別為'cancel'和'close'。</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {this.$confirm('檢測到未保存的內(nèi)容，是否在離開頁面前保存修改？', '確認信息', {distinguishCancelAndClose: true,confirmButtonText: '保存',cancelButtonText: '放棄修改'}).then(() => {this.$message({type: 'info',message: '保存修改'})}).catch(action => {this.$message({type: 'info',message: action === 'cancel'? '放棄保存并離開頁面': '停留在當前頁面'})})}} } </script>

4.9. 在components下創(chuàng)建CenterMessageBox.vue

<template><div><h1>居中布局</h1><h4>將center設(shè)置為true即可開啟居中布局</h4><el-button type="text" @click="open">點擊打開 Message Box</el-button></div> </template><script> export default {methods: {open () {this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {this.$message({type: 'success',message: '刪除成功!'})}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})}} } </script>

4.10. 運行項目, 訪問http://localhost:8080/#/AlertMessageBox

4.11. 運行項目, 訪問http://localhost:8080/#/ConfirmMessageBox?

4.12. 運行項目, 訪問http://localhost:8080/#/PromptMessageBox?

4.13. 運行項目, 訪問http://localhost:8080/#/Msgbox?

4.14. 運行項目, 訪問http://localhost:8080/#/HtmlMessageBox?

4.15. 運行項目, 訪問http://localhost:8080/#/CancelCloseMessageBox?

4.16. 運行項目, 訪問http://localhost:8080/#/CenterMessageBox?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。