dialog（對話框）
創(chuàng)建并顯示對話框，彈出的對話框為非阻塞模式，用戶點擊對話框上的按鈕后關閉( h5模式的對話框也可通過 closepopup關閉 )，并通過callback函數返回用戶點擊按鈕的索引值或輸入框中的值。
Dialog 組件包含:

• alert 警告框
• confirm 確認框
• prompt 輸入對話框
• toast 消息提示框

mui會根據ua判斷,彈出原生對話框還是h5繪制的對話框,在基座中默認會彈出原生對話框,可以配置type屬性,使得彈出h5模式對話框

兩者區(qū)別:1.原生對話框可以跨webview,2.h5對話框樣式統(tǒng)一而且可以修改對話框屬性或樣式

1.alert 警告框

.alert( message, title, btnValue, callback [, type] ) message Type: String 提示對話框上顯示的內容 title Type: String 提示對話框上顯示的標題 btnValue Type: String 提示對話框上按鈕顯示的內容 callback Type: Function 提示對話框上關閉后的回調函數 type Value: 'div' 是否使用h5繪制的對話框

2.confirm 確認框

.confirm( message, title, btnValue, callback [, type] ) message Type: String 提示對話框上顯示的內容 title Type: String 提示對話框上顯示的標題 btnValue Type: Array 提示對話框上按鈕顯示的內容 callback Type: Function 提示對話框上關閉后的回調函數 type Value: 'div' 是否使用h5繪制的對話框

3.prompt 輸入對話框

.prompt( message, placeholder, title, btnValue, callback[, type] ) message Type: String 提示對話框上顯示的內容 placeholder Type: String 編輯框顯示的提示文字 title Type: String 提示對話框上顯示的標題 btnValue Type: Array 提示對話框上按鈕顯示的內容 callback Type: Function 提示對話框上關閉后的回調函數 type Value: 'div' 是否使用h5繪制的對話框

如果有定制對話框樣式的需求( 只能修改h5模式對話框)可以在mui.css中修改.mui-popup類下的樣式
如果需要修改DOM結構可以按照以下方式處理.

//修改彈出框默認input類型為password mui.prompt('text','deftext','title',['true','false'],null,'div') document.querySelector('.mui-popup-input input').type='password'

4.toast 消息提示框

.toast( message [,options])

message:'String' - 消息框顯示的文字內容options: {JSON} - 提示消息的參數

options 參數需要mui v3.5+支持
options參數以及說明

mui.toast('登陸成功',{ duration:'long', type:'div' })

參考文檔：MUI

總結

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

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