把組件庫的alert掛載到vue的$下面

各類彈出框使用說明

包含 toast,alert(短提示,長提示+富文本編輯-彈出/長提示+富文本編輯-抽屜),confirm

alert 和 confirm

1.引用

main.js 中引入

/*注意此處引入的是index文件*/
import AlertDialog from "@/components/Alert/index";
Vue.use(AlertDialog);

2.使用

調(diào)用方式:
a(只輸入顯示的提示信息):
Eg:

this.$alert("提示信息");

b(傳入對象-包含提示信息和點(diǎn)擊確認(rèn)的回調(diào)函數(shù)):
Eg:

this.$alert({
  msg: "提示信息",
  yesFunction: this.dockYes /*此處為點(diǎn)擊確認(rèn)的回調(diào)函數(shù)*/,
  /*其他參數(shù)...*/
});

組件支持以下自定義參數(shù):
header -顯示標(biāo)題
msg -顯示文本內(nèi)容
alertWidth -alert 彈窗寬度(string-'260'/'260px')
target -彈窗指定的目標(biāo)容器(默認(rèn) body)
yesFunction -點(diǎn)擊確認(rèn)的回調(diào)函數(shù)宋渔,該函數(shù)在 alert 關(guān)閉后執(zhí)行
position - 彈窗顯示位置(默認(rèn) center,100)

組件構(gòu)建方式:

1.使用 vue.extend 創(chuàng)建組件構(gòu)造器筷弦,調(diào)用的時(shí)候 new 一個(gè)出來蚀狰,通過 new 出來的新組件接參數(shù),把對象掛到$alert 下述吸。
2.alert 中的內(nèi)容,需求:圖標(biāo)+內(nèi)容。原本 ejs 的彈窗無圖標(biāo)充活。content 只能支持整個(gè)組件傳入(組件無法接收 props)蜂莉,或自定義 html 片段,或只顯示 msg 文字混卵。最終采用自定義 html 片段方式映穗,在彈窗 mounted 中,手動(dòng)指定 innerHTML幕随。

toast

使用

//4種狀態(tài)success information warning error
/*
 *參數(shù)說明:參1:顯示的內(nèi)容文字蚁滋,
 *參2:title,可不傳赘淮,不傳的話辕录,默認(rèn)是打開頁簽的標(biāo)題 document.title
 *參3:顯示的位置默認(rèn)為 { X: 'center', Y: 'top'} 中上顯示,可傳值 { X: 'calc(50% - 150px)', Y: '50%'} 最中心區(qū)域顯示梢卸,也可傳其他自定義位置走诞。
 */
this.$toast.success("提示信息", "top");
this.$toast.information("提示消息", "自定義title");
this.$toast.warning("提示警告", "自定義title", { X: "left", Y: "top" });

/王夢涵 2021-05-13/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蛤高,隨后出現(xiàn)的幾起案子蚣旱,更是在濱河造成了極大的恐慌,老刑警劉巖戴陡,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件塞绿,死亡現(xiàn)場離奇詭異,居然都是意外死亡恤批,警方通過查閱死者的電腦和手機(jī)异吻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喜庞,“玉大人涧黄,你說我怎么就攤上這事「尘#” “怎么了笋妥?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長窄潭。 經(jīng)常有香客問我春宣,道長,這世上最難降的妖魔是什么嫉你? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任月帝,我火速辦了婚禮,結(jié)果婚禮上幽污,老公的妹妹穿的比我還像新娘嚷辅。我一直安慰自己,他們只是感情好距误,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布簸搞。 她就那樣靜靜地躺著扁位,像睡著了一般。 火紅的嫁衣襯著肌膚如雪趁俊。 梳的紋絲不亂的頭發(fā)上域仇,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天,我揣著相機(jī)與錄音寺擂,去河邊找鬼暇务。 笑死,一個(gè)胖子當(dāng)著我的面吹牛怔软,可吹牛的內(nèi)容都是我干的垦细。 我是一名探鬼主播,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼挡逼,長吁一口氣:“原來是場噩夢啊……” “哼括改!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起挚瘟,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤叹谁,失蹤者是張志新(化名)和其女友劉穎饲梭,沒想到半個(gè)月后乘盖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡憔涉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年订框,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兜叨。...
    茶點(diǎn)故事閱讀 38,100評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡穿扳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出国旷,到底是詐尸還是另有隱情矛物,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布跪但,位于F島的核電站履羞,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏屡久。R本人自食惡果不足惜忆首,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望被环。 院中可真熱鬧糙及,春花似錦、人聲如沸筛欢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至揣钦,卻和暖如春雳灾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背冯凹。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工谎亩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宇姚。 一個(gè)月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓匈庭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親浑劳。 傳聞我的和親對象是個(gè)殘疾皇子阱持,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評論 2 345

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