Vue封装Toast消息提示

时间：2023-03-31 14:45:56 vue.js

.Toast{position:fixed;宸︼細50%锛涢《閮細50%锛涜儗鏅細rgb锛?33銆?33銆?35锛夛紱濉厖锛?0px锛涜竟鐣屽崐寰勶細5px锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱鍔ㄧ敾锛歴how-toast.2s锛涢鑹诧細#909399锛涙孩鍑猴細闅愯棌锛涙樉绀猴細寮规€э紱瀵归綈椤圭洰锛氬眳涓紱}@keyframesshow-toast{鏉ヨ嚜{opacity:0;}鑷硔涓嶉€忔槑搴︼細1锛泒}Vue灏佽Toast娑堟伅鎻愮ず鍦ㄥ涔燰ue鐨勮矾涓婏紝闅惧厤灏佽涓€浜涜嚜瀹氫箟缁勪欢銆備粖澶╁皝瑁呬竴涓猅oast娑堟伅鎻愮ず銆傚悗闈㈣繕鏈変竴涓璇濇锛屽師鐞嗙被浼笺€傚厛鍏堢湅鐪嬫晥鏋滃浘锛岀幇鍦ㄦ墠鐭ラ亾鐢╭q褰曞埗gif鏄涔堢殑鏂逛究銆傦紙闈炲箍鍛婏紝鍚庨潰浼氱敤鍒版洿澶歡if锛?鏅€氱粍浠惰皟鐢?鍏ㄥ眬娉ㄥ唽瀵硅薄璋冪敤锛堜笉鐭ラ亾鏄笉鏄彨杩欎釜鍚嶅瓧锛?棣栧厛灏佽涓€涓櫘閫氱粍浠剁湅鐪嬫晥鏋溿€?鍏堝垱寤烘渶甯哥敤鐨勭粍浠?toast/Toast.vue鐪嬫晥鏋溿€?template>{{message}}

鐒跺悗灏卞彲浠ョ湅鍒拌繖涓晥鏋滀簡锛屼絾鏄牱寮忎笉濂界湅3.鎴戝閰嶈壊缁忛獙涓嶅锛屾墍浠ュ弬鑰冧簡ElementUI銆傛坊鍔犲瓧浣撴牱寮忥紝鎻愮ず灏忓浘鏍囷紝涓€鍏卞洓绉嶏紝闇€瑕佽嚜宸卞幓闃块噷鐭㈤噺涓嬭浇銆?template>{{message}}

.Toast{浣嶇疆锛氬浐瀹氾紱宸︼細50%锛涢《閮細50%锛涜儗鏅細rgb锛?33銆?33銆?35锛夛紱濉厖锛?0px锛涜竟鐣屽崐寰勶細5px锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱鍔ㄧ敾锛歴how-toast.2s锛涢鑹诧細#909399锛涙孩鍑猴細闅愯棌锛涙樉绀猴細寮规€э紱瀵归綈椤圭洰锛氬眳涓紱}@keyframesshow-toast{鏉ヨ嚜{opacity:0;}鑷硔涓嶉€忔槑搴︼細1锛泒}銆傛垚鍔焮棰滆壊锛?67C23A;鑳屾櫙锛歊GB锛?25銆?43銆?16锛夛紱}.warning{棰滆壊锛?E6A23C锛涜儗鏅細RGB锛?50銆?36銆?16锛夛紱}.fail{棰滆壊锛?F56C6C锛涜儗鏅細RGB锛?53銆?26銆?26锛夛紱}.iconimg{瀹藉害锛?0px锛涢珮搴︼細20px锛涢《閮ㄨ竟璺濓細3px锛涘彸杈硅窛锛?px锛泒4鐪嬬編鍖栧悗鐨勬晥鏋滐紝涓€鍏辨湁鍥涚绫诲瀷锛屾垚鍔熺被鍨嬪搴旂殑瀹屾暣浠ｇ爜Github鍦板潃https://github.com/CoderCharm...缁勪欢璋冪敤鎬荤粨璋冪敤寰堜笉鏂逛究銆傞渶瑕佸鍏ワ紝浼犲叆鍙傛暟锛屽洖璋冪瓑锛屼笉绗﹀悎浣跨敤涔犳儻锛屽儚ElementUI锛岀敤璧锋潵寰堟柟渚裤€備笅涓€姝ュ氨鏄線閭ｄ釜鏂瑰悜灏佽銆傚弻缁勪欢灏佽鍏ㄥ眬娉ㄥ唽1杩欐閲嶆柊鍒涘缓涓€涓?toast/CustToast.vue缁勪欢锛屾病鏈夊啓澶閫昏緫銆?template>{{娑堟伅}}

.CustToast{position:fixed;宸︼細50%锛涢《閮細50%锛涜儗鏅細rgb锛?33銆?33銆?35锛夛紱濉厖锛?0px锛涜竟鐣屽崐寰勶細5px锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱鍔ㄧ敾锛歴how-toast.2s锛涢鑹诧細#909399锛涙孩鍑猴細闅愯棌锛涙樉绀猴細寮规€э紱瀵归綈椤圭洰锛氬眳涓紱}@keyframesshow-toast{鏉ヨ嚜{opacity:0;}鑷硔涓嶉€忔槑搴︼細1锛泒}.success{棰滆壊锛?67C23A;鑳屾櫙锛歊GB锛?25銆?43銆?16锛夛紱}.warning{棰滆壊锛?E6A23C锛涜〃鐜板姏澹伴煶锛歊GB锛?50銆?36銆?16锛夛紱}.fail{棰滆壊锛?F56C6C锛涜儗鏅細rgb锛?53銆?26銆?26锛夛紱}.iconimg{瀹藉害锛?0px锛涢珮搴︼細20px锛涢《閮ㄨ竟璺濓細3px锛涘彸杈硅窛锛?px锛泒2鐒跺悗鍦ㄥ悓绾х洰褰曚笅鍒涘缓涓€涓?toast/index.js鏂囦欢缁勶紝骞跺湪Vue涓坊鍔犲師鍨?toast//importvuefrom'vue'//importcustomtoToast缁勪欢importCustToastfrom'./CustToast.vue'//鐢熸垚涓€涓墿灞曞疄渚嬫瀯閫犲嚱鏁癱onstToastConstructor=vue.extend(CustToast);//瀹氫箟寮瑰嚭缁勪欢鎺ユ敹涓変釜鍙傛暟鐨勫嚱鏁癿essagetoasttype鏄剧ず鏃堕棿functionshowToast(message,type="normal",duration=2000){//瀹炰緥鍖栦竴涓狢ustToast.vueconst_toast=newToastConstructor({data(){return{showToast:true,type:type,message:message,duration:duration}}});//灏嗗疄渚嬪寲鐨凜ustToast.vue娣诲姞鍒版鏂囦腑letelement=_toast.$mount().$el;document.body.appendChild锛堝厓绱狅級锛?/鎸佺画鏃堕棿缁撴潫鍚庨殣钘弒etTimeout(()=>{_toast.showToast=false},dduration)}//闇€瑕佸湪main.js涓娇鐢╒ue.use(showToast);showToast.install=(Vue)=>{//灏嗙粍浠舵敞鍐屽埌vue鐨勫師鍨嬮摼涓紝//杩欐牱灏卞彲浠ュ湪鎵€鏈塿ue鐨勪緥瀛愪腑浣跨敤this.$toast()Vue.prototype.$toast=showToast};//exportexportdefaultshowToast3vue-climain.js鏂囦欢娉ㄥ唽importshowToastfrom'@/yourpath/toast/index'Vue.use(showToast);4浣跨敤//灏佽鏃讹紝瀹氫箟浜嗕笁涓弬鏁帮紝蹇呴』浼犻€抦essage//message,type="normal",duration=2000this.$toast("Testnormal")this.$toast("Testsuccess","success",5000)this.$toast("Testwarning","warning")this.$toast("Testfailure","fail")浣犲彲浠ョ湅鍒板紑澶达紝鎴慸emo鐨刧if褰撶劧锛屾垜娌℃湁鑷畾涔変腑闂存秷鎭彁绀虹殑鏄剧ず浣嶇疆銆備篃鏄熀浜庡悓鏍风殑type鎬濊矾锛屽彧鏄粰瀹冧竴涓猚lassstyle銆傚彟澶栨秷澶卞姩鐢绘病鏈夊鐞嗭紝寮瑰嚭澶氭潯娑堟伅鏃剁洿鎺ユ姌鍙犮€傜浜岀灏佽鏂瑰紡Github鍦板潃锛歨ttps://github.com/CoderCharm...灏佽鎬荤粨杩欐槸鎴戠涓€娆″皝瑁呰嚜宸辩殑鍏ㄥ眬瀵硅薄锛孷ue鍘熷瀷鎸傝浇锛寁ue.extend鐨勭敤娉曘€傚畼缃慥ue.extenddescriptionhttps://cn.vuejs.org/v2/api/i...瑙夊緱杩樺ソ灏卞幓鎴戠殑椤圭洰鐐逛釜star鍚ю煠?/p>