各類彈出框使用說明
包含 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/