Element-Ui組件 MessageBox 彈框

官方文檔?http://element-cn.eleme.io/#/zh-CN/component/message-box

基礎(chǔ)用法

消息提示彈框

```

點擊打開 Message Boxexportdefault{? ? methods: {? ? ? open() {this.$alert('這是一段內(nèi)容','標題名稱', {? ? ? ? ? confirmButtonText:'確定',? ? ? ? ? callback: action => {this.$message({? ? ? ? ? ? ? type:'info',? ? ? ? ? ? ? message: `action: ${ action }`? ? ? ? ? ? });? ? ? ? ? }? ? ? ? });? ? ? }? ? }? }

點擊打開 Message Boxexportdefault{ methods: { open() {this.$alert('這是一段內(nèi)容','標題名稱', { confirmButtonText:'確定', callback: action => {this.$message({ type:'info', message: `action: ${ action }` }); } }); } } } 點擊打開 Message Boxexportdefault{ methods: { open() {this.$alert('這是一段內(nèi)容','標題名稱', { confirmButtonText:'確定', callback: action => {this.$message({ type:'info', message: `action: ${ action }` }); } }); } } }<template>

? <el-button type="text" @click="open">點擊打開 Message Box</el-button>

</template>

<script>

? export default {

? ? methods: {

? ? ? open() {

? ? ? ? this.$alert('這是一段內(nèi)容', '標題名稱', {

? ? ? ? ? confirmButtonText: '確定',

? ? ? ? ? callback: action => {

? ? ? ? ? ? this.$message({

? ? ? ? ? ? ? type: 'info',

? ? ? ? ? ? ? message: `action: ${ action }`

? ? ? ? ? ? });

? ? ? ? ? }

? ? ? ? });

? ? ? }

? ? }

? }

</script>

```

確認消息彈框

```

? 點擊打開 Message Boxexportdefault{methods: {? ? ? open2() {this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?','提示', {confirmButtonText:'確定',cancelButtonText:'取消',type:'warning'}).then(() => {this.$message({? ? ? ? ? ? type:'success',? ? ? ? ? ? message:'刪除成功!'});? ? ? ? }).catch(() => {this.$message({? ? ? ? ? ? type:'info',? ? ? ? ? ? message:'已取消刪除'});? ? ? ? ? ? ? ? ? });? ? ? }? ? }? }

<template>

? <el-button type="text" @click="open2">點擊打開 Message Box</el-button>

</template>

<script>

? export default {

? ? methods: {

? ? ? open2() {

? ? ? ? this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {

? ? ? ? ? confirmButtonText: '確定',

? ? ? ? ? cancelButtonText: '取消',

? ? ? ? ? type: 'warning'

? ? ? ? }).then(() => {

? ? ? ? ? this.$message({

? ? ? ? ? ? type: 'success',

? ? ? ? ? ? message: '刪除成功!'

? ? ? ? ? });

? ? ? ? }).catch(() => {

? ? ? ? ? this.$message({

? ? ? ? ? ? type: 'info',

? ? ? ? ? ? message: '已取消刪除'

? ? ? ? ? });? ? ? ? ?

? ? ? ? });

? ? ? }

? ? }

? }

</script>

```

提交內(nèi)容彈框

```

? 點擊打開 Message Boxexportdefault{methods: {? ? ? open3() {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:'取消輸入'});? ? ? ? ? ? ? });? ? ? }? ? }? }

<template>

? <el-button type="text" @click="open3">點擊打開 Message Box</el-button>

</template>

<script>

? export default {

? ? methods: {

? ? ? open3() {

? ? ? ? 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>

```

自定義彈框

```

? 點擊打開 Message Boxexportdefault{methods: {? ? ? open4() {consth =this.$createElement;this.$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 =true;? ? ? ? ? ? ? instance.confirmButtonText ='執(zhí)行中...';? ? ? ? ? ? ? setTimeout(() => {? ? ? ? ? ? ? ? done();? ? ? ? ? ? ? ? setTimeout(() => {? ? ? ? ? ? ? ? ? instance.confirmButtonLoading =false;? ? ? ? ? ? ? ? },300);? ? ? ? ? ? ? },3000);? ? ? ? ? ? }else{done();? ? ? ? ? ? }? ? ? ? ? }? ? ? ? }).then(action => {this.$message({? ? ? ? ? ? type:'info',? ? ? ? ? ? message:'action: '+ action? ? ? ? ? });? ? ? ? });? ? ? }? ? }? }

<template>

? <el-button type="text" @click="open4">點擊打開 Message Box</el-button>

</template>

<script>

? export default {

? ? methods: {

? ? ? open4() {

? ? ? ? const h = this.$createElement;

? ? ? ? this.$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 = true;

? ? ? ? ? ? ? instance.confirmButtonText = '執(zhí)行中...';

? ? ? ? ? ? ? setTimeout(() => {

? ? ? ? ? ? ? ? done();

? ? ? ? ? ? ? ? setTimeout(() => {

? ? ? ? ? ? ? ? ? instance.confirmButtonLoading = false;

? ? ? ? ? ? ? ? }, 300);

? ? ? ? ? ? ? }, 3000);

? ? ? ? ? ? } else {

? ? ? ? ? ? ? done();

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? }).then(action => {

? ? ? ? ? this.$message({

? ? ? ? ? ? type: 'info',

? ? ? ? ? ? message: 'action: ' + action

? ? ? ? ? });

? ? ? ? });

? ? ? }

? ? }

? }

</script>

```

options：

參數(shù)類型說明可選值默認值

titleMessageBox 標題string——

messageMessageBox 消息正文內(nèi)容string / VNode——

dangerouslyUseHTMLString是否將 message 屬性作為 HTML 片段處理boolean—false

type消息類型，用于顯示圖標stringsuccess / info / warning / error—

customClassMessageBox 的自定義類名string——

callback若不使用 Promise第献，可以使用此參數(shù)指定 MessageBox 關(guān)閉后的回調(diào)function(action, instance)痊硕，action 的值為’confirm’或’cancel’, instance 為 MessageBox 實例押框，可以通過它訪問實例上的屬性和方法——

showCloseMessageBox 是否顯示右上角關(guān)閉按鈕boolean—true

beforeCloseMessageBox 關(guān)閉前的回調(diào)，會暫停實例的關(guān)閉function(action, instance, done)盒揉，action 的值為’confirm’或’cancel’兑徘；instance 為 MessageBox 實例挂脑，可以通過它訪問實例上的屬性和方法；done 用于關(guān)閉 MessageBox 實例——

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)閉 MessageBoxboolean—true（以 alert 方式調(diào)用時為 false）

closeOnPressEscape是否可通過按下 ESC 鍵關(guān)閉 MessageBoxboolean—true（以 alert 方式調(diào)用時為 false）

closeOnHashChange是否在 hashchange 時關(guān)閉 MessageBoxboolean—true

showInput是否顯示輸入框boolean—false（以 prompt 方式調(diào)用時為 true）

inputPlaceholder輸入框的占位符string——

inputType輸入框的類型string—text

inputValue輸入框的初始文本string——

inputPattern輸入框的校驗表達式regexp——

inputValidator輸入框的校驗函數(shù)￠先裕可以返回布爾值或字符串牍戚，若返回一個字符串, 則返回結(jié)果會被賦值給 inputErrorMessagefunction——

inputErrorMessage校驗未通過時的提示文本string—輸入的數(shù)據(jù)不合法!

center是否居中布局boolean—false

roundButton是否使用圓角按鈕boolean—false

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市如孝，隨后出現(xiàn)的幾起案子宪哩，更是在濱河造成了極大的恐慌，老刑警劉巖第晰，帶你破解...
    沈念sama閱讀 219,110評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件斋射，死亡現(xiàn)場離奇詭異育勺，居然都是意外死亡，警方通過查閱死者的電腦和手機罗岖，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門涧至，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人桑包，你說我怎么就攤上這事⊙屏耍” “怎么了赘方？”我有些...
    開封第一講書人閱讀 165,474評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長弱左。 經(jīng)常有香客問我窄陡，道長，這世上最難降的妖魔是什么拆火？ 我笑而不...
    開封第一講書人閱讀 58,881評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任跳夭，我火速辦了婚禮，結(jié)果婚禮上们镜，老公的妹妹穿的比我還像新娘币叹。我一直安慰自己，他們只是感情好模狭，可當我...
    茶點故事閱讀 67,902評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布颈抚。 她就那樣靜靜地躺著，像睡著了一般嚼鹉。 火紅的嫁衣襯著肌膚如雪贩汉。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,698評論 1贊 305
  • 城市分裂傳說
    那天锚赤，我揣著相機與錄音雾鬼，去河邊找鬼。 笑死宴树，一個胖子當著我的面吹牛策菜，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播酒贬，決...
    沈念sama閱讀 40,418評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼又憨，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了锭吨？” 一聲冷哼從身側(cè)響起蠢莺，我...
    開封第一講書人閱讀 39,332評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎零如，沒想到半個月后躏将，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锄弱，經(jīng)...
    沈念sama閱讀 45,796評論 1贊 316
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年祸憋，在試婚紗的時候發(fā)現(xiàn)自己被綠了会宪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,110評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡蚯窥，死狀恐怖掸鹅，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情拦赠，我是刑警寧澤巍沙，帶...
    沈念sama閱讀 35,792評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站荷鼠，受9級特大地震影響句携，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜允乐，卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一矮嫉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧喳篇，春花似錦敞临、人聲如沸态辛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽奏黑。三九已至炊邦，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間熟史，已是汗流浹背馁害。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蹂匹，地道東北人碘菜。 一個月前我還...
    沈念sama閱讀 48,348評論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像限寞，于是被迫代替她去往敵國和親忍啸。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2贊 355

推薦閱讀更多精彩內(nèi)容