第五集：从头实现一套toast组件

锛屼竴涓狿C绔疺ue鐨剈i缁勪欢搴撱€傜5闆嗭細浠庡ご寮€濮嬪疄鏂斤紙toast缁勪欢锛夈€傛洿澶氬脊绐楃浉鍏崇殑涓滆タ浼氬湪alert缁勪欢涓€備笅涓€绔犳槸鍔犺浇缁勪欢銆傚緢楂樺叴鏄ㄥぉ鑳藉埌鐜板満褰曞埗銆婅劚鍙ｇ澶т細銆嬶紝蹇冩儏寰堝ソ馃榿銆備竴锛歵oast闇€姹傚垎鏋愬脊鍑烘彁绀轰俊鎭紝鍖哄埆浜巃lert锛宼oast涓昏鏄畝鍗曟彁绀恒€傜敤鎴蜂笉闇€瑕佹搷浣渄om锛岀洿鎺ョ敤js鎿嶄綔鍗冲彲锛堟瘮濡傚皝瑁卆xios鏃讹紝娌℃湁template绛夋爣绛撅級銆備紭鍏堢骇搴旇鏄彲鎺х殑锛岄粯璁ょ殑搴旇楂樹竴浜涖€傛瘯绔燂紝鎻愮ず搴旇鏇撮啋鐩€傚畠鍙互鑷娑堝け銆傚畠鍙互鎵嬪姩娑堝け銆傚緢甯歌鐨勬槸鐢ㄦ埛鐤媯鐐瑰嚮锛屾垨鑰呭娆¤Е鍙戜簨浠讹紝澶勭悊澶ч噺鐨勫脊绐楁儏鍐靛拰鍔ㄧ敾銆傚強鏃舵竻闄om缁撴瀯锛屾瘮濡傝烦杞殑鏃跺€欙紝浠ュ厤閫犳垚鎬ц兘鎹熷け銆備簩锛氬熀鏈粨鏋勬惌寤虹殑璇濅笉澶氾紝瀵煎嚭鏂囦欢Toast/index.js銆傚鍑洪粯璁ゅ鍏ラ」锛屽彲浠ョ畝鍐欏涓嬨€俥xport{default}from'./main/toast.js';//鐢变簬杩欎釜js鏂囦欢鐨勫唴瀹规瘮杈冮噸瑕侊紝鍚庨潰鍐嶈锛屽厛鍐欑粨鏋則oast.vue鏂囦欢js閮ㄥ垎浠庘€淍/components/Icon/main/icon.vue鈥濆鍏cIcon锛沞xportdefault{name:"toast",components:{ccIcon},props:{zIndex:{type:Number,default:10},showButton:{//鏄惁鍏抽棴xtype:Boolean,default:true},}}涓夛細浠巣-index瀵规垜z-index鐨勪竴浜涚湅娉曚粠鍊肩殑璁剧疆涓婂彲浠ョ湅鍑轰竴涓汉鐨勫浜嬮鏍笺€傛瘮濡傛垜涔嬪墠鍚堜綔杩囩殑鍑犱釜浜猴紝鎴戜粈鑷崇湅鍒版湁浜虹粡甯稿啓999999锛屾垜涓嶈浠栬繖鏍峰啓锛岀劧鍚庝粬鍥炲鎴戯紝鎴戜笉涔犳儻杩欐牱鍐欚煠封€嶏笍锛屾垜璇村鏋滄垜鎯冲啓鍑烘瘮浠栨按骞虫洿楂樼殑涓滆タ鎬庝箞鍔烇紵浠栬锛氱粷瀵逛笉鍙兘鏈夐偅绉嶆儏鍐点€傜患鍚堝垎鏋愪竴鐩簡鐒躲€傚枩娆㈣繖鏍峰啓鐨勪汉锛屼竴鏄病鏈夐暱杩滆鍒掞紝娌℃湁鎯宠繃鏈潵鐨勫鏍锋€э紝浜屾槸娌℃湁鑰冭檻鍥㈤槦鍚堜綔锛屾病鏈夌粰鍒汉鍐欎唬鐮佺殑浣欏湴锛屽彧鍏冲績鑷繁銆傛垜鍦ㄨ嚜宸辩嫭绔嬭礋璐ｇ殑瀹為檯椤圭洰涓祴璇曡繃锛?-10鐨剒-index宸茬粡鍙互搴斾粯澶ч儴鍒嗛」鐩簡銆傛妸涓€涓腑灏忓瀷椤圭洰鍒嗘垚10灞傦紝鐪熺殑寰堝銆傝繖閲岄潰涔熸湁涓€浜涙妧宸с€傛瘮濡傛瘡娆¤缃?,3,5,7,9,杩欐槸涓轰簡浠ュ悗濡傛灉鏈夌壒娈婃儏鍐佃鏀惧湪鏌愪袱涓腑闂达紝鍙互鐣欎竴涓彃鍏ヤ綅缃紝鑷敱绾︽潫z-绱㈠紩鏄竴涓悎鏍奸」鐩殑寮€濮嬨€傚洓锛歴css鍩烘湰鏍峰紡璁剧疆vue-cc-ui/src/style/Toast.scss@import'./common/mixin.scss';@import"./common/animation.scss";@includeb(toast){浣嶇疆锛氬浐瀹氾紱鏄剧ず锛氬唴鑱斿潡锛涜儗鏅壊锛氱櫧鑹诧紱椤堕儴锛?px锛?/椤堕儴锛屼腑宸︼細50%锛涘～鍏咃細6px20px锛涜繃娓★細鎵€鏈?3s锛涜浆鎹細translateX(-50%)锛?/杩欏ui鐨勭簿楂擆煒忛粦杈广€侤includecommonShadow($--color-black);//瀹氫箟鍔ㄧ敾鐪嬭捣鏉ュ儚浠€涔園at-root{@includecommonType(cc-toast--);.#{$namespace}-toast--big{濉厖锛?px35px6px20px;}.#{$namespace}-toast-fade-enter,.#{$namespace}-toast-fade-leave-active{opacity:0;杞崲锛氱炕璇戯紙-50%锛?100%锛夛紱}};}浜旓細鎻愮ず妗嗙殑绫诲瀷棰滆壊鎻愮ず妗嗛渶瑕佺敤鎴疯兘澶熺洿瑙傜殑鍒嗚鲸鍏跺惈涔夈€備緥濡傦紝褰撶敤鎴锋病鏈夌湅鍒版彁绀烘枃瀛楋紝浣嗘槸鐪嬪埌绾㈣壊鐨勬彁绀烘鏃讹紝灏变細鐭ラ亾涓嶅簲璇ヨ繘琛屽垰鎵嶇殑鎿嶄綔銆傚睘鎬у綋鐒舵槸typeprops:{type:{type:String,default:"nomal"},calculated鍦ㄥ睘鎬т腑锛屾垜浠繕闇€瑕佹寚瀹氫竴浜涘悎娉曠殑鍊硷紝浠ュ強鐢ㄦ埛鍑洪敊鏃剁殑榛樿鍊笺€俢omputed:{toastType(){//杩欓噷鎴戝仛浜嗘甯搞€佹垚鍔熴€佸け璐ュ拰璀﹀憡letary=["nomal","success","warning","danger"];//杩欓噷鍐欎笁鍏冧篃鏄彲浠ョ殑锛屼絾鏄笉鏂逛究鎵╁睍锛屼竾涓€浠ュ悗闇€瑕佹敼锛岋紝锛岋紝//鏃犳墍璋擄紝鎴戝氨鏄笉鎯冲啓閭ｇ寰堥暱鐨勪唬鐮佺墖娈礽f(ary.includes(this.type)){return"cc-toast--"+this.type;}杩斿洖鈥渃c-toast--nomal鈥濓紱}},scss@at-root{@includecommonType(cc-toast--);};涔嬪墠鍐欑殑util绫伙紝鍔犱笂褰╄壊杈规@mixincommonType($name){@each$typein(success,warning,danger){.#{$name}#{$type}{@includecommonShadow($type);}}}鏁堟灉灞曠ず6锛氭覆鏌撳埌椤甸潰锛堣繖涓彲浠ュ紩鍑哄浣曞叧闂級vue-cc-ui/src/components/Toast/main/toast.js鎴戜細鍐欏埌杩欓噷寰堣缁嗙殑娉ㄩ噴锛侊紒锛?/1锛氬鍏ュ啓濂界殑缁勪欢锛屾寜鐓ф墦鍖呰鍒欙紝鍏跺疄灏辨槸寮曞叆宸茬粡澶勭悊濂界殑js浠ｇ爜importtoastfrom'./toast.vue';exportdefault{//2锛氶厤鍚坲se鏂规硶install(Vue){//3锛氫负浜嗕繚璇佸脊鍑虹殑toast鍙互鍏ㄥ眬鎺у埗锛屾垜浠彧鑳藉師鍨嬬紪绋?/杩欎釜options鏄垜浠互鍚庤皟鐢ㄧ殑鏃跺€欎紶鍏ョ殑鍙傛暟銆俈ue.prototype.$ccToast=function(options){//4:浣跨敤鍩虹Vue鏋勯€犲嚱鏁帮紝鍒涘缓涓€涓€滃瓙绫烩€濊Constructor=Vue.extend(toast),node;//5:鎴戜滑浼犲叆鐨勯厤缃」if(typeofoptions==='object'&&optionsinstanceofObject){//6:瀹炰緥鍖栬繖涓粍浠秐ode=newConstructor({//7:鐩稿綋浜庝綘鐨勬暟鎹畃ropsData:options鍦ㄦ暟鎹腑瀹氫箟});//8:鎻愬彇闇€瑕佸脊鍑虹殑淇℃伅鍒伴粯璁ゆЫ//鍏堣В閲婁竴涓嬩负浠€涔堟垜浠繖閲岀敤鏁扮粍//鍥犱负杩欓噷鎴戜滑浼犻€掔殑杈撳叆鏄?structure'//鎵€浠ュ彲鑳芥槸澶氫釜锛屼篃鍙兘鏄畠鍙兘鏄祵濂楃殑锛?/鎵€浠ue蹇呴』鐢ㄦ暟缁勭殑褰㈠紡鏉ヨВ鏋?/涔熷彲浠ヨ浠栬鐨勬槸涓€涓€樺瓙鍏冪礌鐨勯泦鍚堚€欍€?/濡傛灉浣犲杩欐柟闈㈡劅鍏磋叮锛屽彲浠ュ幓render鐨勫疄鐜般€俷ode.$slots.default=[options.message];//5:鎴戜滑浼犲叆涓€涓瓧绗︿覆}elseif(typeofoptions==='string'){//6:鐩存帴瀹炰緥鍖栧氨鍙互浜唍ode=newConstructor();node.$slots.default=[閫夐」];}//9:璋冪敤鍑芥暟鐨勭敓鍛藉懆鏈焠ode.vm=node.$mount();//10:璁╀粬鐜拌韩node.vm.visible=true//11:鏃犳儏鎻掑叆//濡傛灉鏈夊悓瀛︽湁鐗规畩闇€姹傦紝涓嶆兂璁╀粬鎻掑叆浣撳唴锛屼笉杩囪繖鏍蜂篃濂戒紶鍏?document.body.appendChild(node.$el);};}};7:娓呴櫎缁勪欢锛屼篃鍙互璇存槸鐢ㄦ埛鐐瑰嚮x鍚庯紝闇€瑕佹竻闄om缁撴瀯锛岃€屼笉鏄殣钘忕敤鎴枫€傚鏋滄病鏈夋樉绀簒锛屽垯闇€瑕佸€掕鏃舵潵鍏抽棴璇ュ厓绱犮€傚悗鑰呯敤鏉ユ帺鐩栧墠涓€绉嶆柟寮忔樉绀恒€傛兂浜嗘兂锛屾病鏈夊畾涔塩learAll鍑芥暟銆傚師鍥犲涓嬶細鎴戜箣鍓嶅仛鐨勯」鐩€绘槸鍑虹幇杩欐牱鐨勯棶棰樸€傛瘮濡備竴涓汉寰堣皑鎱庯紝浠栦細鍦ㄥ啓瀹屼竴涓彁绀烘鍚庡啓涓€涓猚learAll()锛屾妸鎵€鏈夌殑鎻愮ず閮芥竻闄ゆ帀锛岃繖灏辨秹鍙婂埌宸ョ▼浜嗐€傜粍浠跺畾涔夌殑clearAll浼氭妸鏄剧ず鐨勫叏閮ㄦ竻绌猴紝瀵艰嚧鑷繁娓呯┖鍒汉鐨勬彁绀恒€傝繖绉峛ug涓嶅ソ鎵撅紝鎴戜篃涓嶆槸寰堝枩娆€傚お缁濆鐨勫姛鑳姐€倄缁戝畾鐐瑰嚮浜嬩欢銆?iclass="cc-toast__closeButton"@click="deleteEl"v-if="showButton">//璐熻矗娓呯悊鐨勫嚱鏁癲eleteEl(){//鍏堣Е鍙戝姩鐢绘晥鏋滐紝涓嶈鐩存帴rm锛屽惁鍒欐晥鏋滀細寰堝樊銆倀his.visible=false;setTimeout(()=>{//鍙湁杩欐牱鎵嶈兘娓呯悊缁勪欢馃憞//杩欓噷鏄Щ闄ゅ厓绱爐his.$el.remove();//褰诲簳閿€姣佷竴涓疄渚嬶紝娓呯悊瀹冧笌鍏朵粬瀹炰緥鐨勮繛鎺ュ疄渚嬶紝骞跺彇娑堢粦瀹氬叾鎵€鏈夋寚浠ゅ拰浜嬩欢渚﹀惉鍣ㄣ€傝繖涓€?閿€姣侊紙锛夛紱},300);},scss//杩欎釜'x'涔熼渶瑕佽皟鏁存牱寮忥紝//鎸ュ姩瀹冿紝鍦ㄦ偓鍋滄椂缁欏嚭鐤媯鏃嬭浆鐨勫姩鐢伙紝鍏呮弧娲诲姏銆?{$namespace}-toast__closeButton{display:flex;娓告爣锛氭寚閽堬紱浣嶇疆锛氱粷瀵癸紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱椤堕儴锛?锛涘彸锛?锛涘簳閮細0锛涘～鍏咃細05px锛?:hover{鍔ㄧ敾锛氭棆杞?5s鏃犻檺绾挎€э紱}}鐢ㄦ埛璁剧疆浜嗚嚜鍔ㄥ叧闂€佽繃鏈熸椂闂达紝props:{closeTime:{//鍏抽棴寤惰繜type:Number,default:2000},}//InitAutoClose()鏄惁鍒濆鍖栨椂闂磠//濡傛灉鐢ㄦ埛閫氳繃璐熸暟锛岃鎴戜滑涓轰粬鍑忓幓瀹冦€俰f(this.autoClose&&Math.abs(this.closeTime)>0){//杩欓噷闇€瑕佺敤涓€涓彉閲忔潵杩炴帴瀹冿紝浠庤€岄樆姝粬this銆倀imer=setTimeout(()=>{this.deleteEl();},Math.abs(this.closeTime));}}锛岀敤鎴锋兂璇︾粏鏌ョ湅鎻愮ず鍐呭锛屽皢榧犳爣鏀惧湪toast涓婏紝涓嶇偣鍑诲叧闂?divclass="cc-toast":class="[toastType,{'cc-toast--澶?锛氭樉绀烘寜閽畗]":style="'zIndex:'+zIndex"//绉诲叆鏃朵笉鍏抽棴鍊掕鏃禓mousemove="clearTimer"//绉诲嚭鏃跺啀娆″紑濮嬪€掕鏃禓mouseleave="initAutoClose"v-show="visible">clearTimer(){clearTimeout(this.timer);},鐢ㄦ埛鎯崇偣鍑婚敭鐩樹笂鐨別sc閿叧闂粍浠秏ounted(){this.initAutoClose();//涓€寮€濮嬶紝鎴戜滑闇€瑕佹坊鍔犱竴涓枃浠舵潵鐩戝惉鐢ㄦ埛鐨勯敭鐩樹簨浠禷ddEventListener("keydown",this.keydown);},keydown(e){if(e.keyCode===27){this.deleteEl();}}//鏃㈢劧鏈夋枃浠舵搷浣滐紝閭ｅ綋鐒惰鏈夊垹闄ゆ搷浣溿€俠eforeDestroy(){//涓囦竴鐢ㄦ埛鍐欑殑鏃堕棿闀夸簡锛岃櫧鐒跺厓绱犱笉澶勭悊锛屼絾杩樻槸瑕佸啓杩欎釜銆倀his...涓嬩竴绔犳槸鍔犺浇缁勪欢銆俫ithub锛歡ithub涓汉缃戠珯锛氶摼鎺ヨ鏄?/p>