Mint UI 彈出式提示框-Message Box

2021-09-06 15:21 更新
彈出式提示框,有多種交互形式。

引入

import { MessageBox } from 'mint-ui';

例子

以標(biāo)題與內(nèi)容字符串為參數(shù)進(jìn)行調(diào)用

MessageBox('提示', '操作成功');

或者傳入一個(gè)對(duì)象

MessageBox({
  title: '提示',
  message: '確定執(zhí)行此操作?',
  showCancelButton: true
});

此外,?MessageBox? 還提供了? alert?、?confirm ?和 ?prompt? 三個(gè)方法,它們都返回一個(gè)? Promise?

MessageBox.alert(message, title);
MessageBox.alert('操作成功').then(action => {
  ...
});
MessageBox.confirm(message, title);
MessageBox.confirm('確定執(zhí)行此操作?').then(action => {
  ...
});
MessageBox.prompt(message, title);
MessageBox.prompt('請(qǐng)輸入姓名').then(({ value, action }) => {
  ...
});

在 prompt 中,若用戶點(diǎn)擊了取消按鈕,則 Promise 的狀態(tài)會(huì)變?yōu)??rejected?

API

參數(shù) 說(shuō)明 類型 可選值 默認(rèn)值
title 提示框的標(biāo)題 String
message 提示框的內(nèi)容 String
showConfirmButton 是否顯示確認(rèn)按鈕 Boolean true
showCancelButton 是否顯示取消按鈕 Boolean false
confirmButtonText 確認(rèn)按鈕的文本 String
confirmButtonHighlight 是否將確認(rèn)按鈕的文本加粗顯示 Boolean false
confirmButtonClass 確認(rèn)按鈕的類名 String
cancelButtonText 取消按鈕的文本 String
cancelButtonHighlight 是否將取消按鈕的文本加粗顯示 Boolean false
cancelButtonClass 取消按鈕的類名 String
closeOnClickModal 是否在點(diǎn)擊遮罩時(shí)關(guān)閉提示光 Boolean true (alert 為 false)
showInput 是否顯示一個(gè)輸入框 Boolean false
inputType 輸入框的類型 String 'text'
inputValue 輸入框的值 String
inputPlaceholder 輸入框的占位符 String


實(shí)例演示

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)