Mint UI 簡(jiǎn)單的消息提示框-Toast

2021-09-06 15:05 更新
簡(jiǎn)短的消息提示框,支持自定義位置、持續(xù)時(shí)間和樣式。

引入

import { Toast } from 'mint-ui';

例子

基本用法

Toast('提示信息');

在調(diào)用 ?Toast? 時(shí)傳入一個(gè)對(duì)象即可配置更多選項(xiàng)

Toast({
  message: '提示',
  position: 'bottom',
  duration: 5000
});

若需在文字上方顯示一個(gè) icon 圖標(biāo),可以將圖標(biāo)的類(lèi)名作為? iconClass ?的值傳給 Toast(圖標(biāo)需自行準(zhǔn)備)

Toast({
  message: '操作成功',
  iconClass: 'icon icon-success'
});

執(zhí)行? Toast? 方法會(huì)返回一個(gè) Toast 實(shí)例,每個(gè)實(shí)例都有 ?close? 方法,用于手動(dòng)關(guān)閉 Toast

let instance = Toast('提示信息');
setTimeout(() => {
  instance.close();
}, 2000);

API

參數(shù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值
message 文本內(nèi)容 String
position Toast 的位置 String 'top'
'bottom'
'middle'
'middle'
duration 持續(xù)時(shí)間(毫秒),若為 -1 則不會(huì)自動(dòng)關(guān)閉 Number 3000
className Toast 的類(lèi)名。可以為其添加樣式 String
iconClass icon 圖標(biāo)的類(lèi)名 String


實(shí)例演示

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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)