vue3实现自定义toast（小弹窗）

鍓嶈█锛氳繖涓ゅぉ椤圭洰涓緢澶氬満鏅兘闇€瑕乼oast寮圭獥銆傞」鐩娇鐢╥onic+tialwind_Css锛宨onic涔熸湁鑷繁鐨則oast寮圭獥锛岃櫧鐒跺ぇ閮ㄥ垎鍦烘櫙鐩存帴璋冪敤瀹冩彁渚涚殑api灏卞彲浠ユ弧瓒抽渶姹傦紝浣嗘槸瀹冪殑寮圭獥楂樺害锛堜篃灏辨槸浣嶇疆wherethepopupwindowappears锛変笉鏄珮搴﹁嚜瀹氫箟鐨勶紝鑰屼笖寮圭獥鐨剒-index鍦ㄦ垜浠」鐩腑浼氬拰涓€浜涚粍浠舵湁鍐茬獊锛屼絾鏄箣鍓嶄竴鐩存病鍔炴硶瑙ｅ喅锛屾墍浠ユ垜绠€鍗曞湴鍐欎簡涓€涓粍浠讹紝瀹冧娇鐢ㄤ簡涓€绉嶄笌ionic_Toast楂樺害鐩镐技鐨勬柟娉曘€傝繖涓粍浠舵垜涔熸槸绗竴娆″湪vue3涓嬪疄鐜帮紝缃戜笂涔熸煡闃呬簡寰堝鐩稿叧鐨勬枃绔狅紝涔熷彈鍒颁簡寰堝ぇ鐨勫惎鍙戯紝鎵€浠ュ彇鍏剁簿鍗庯紝鍘诲叾绯熺矔锛屽畬鎴愪簡涓€涓睘浜庢垜涓汉鐨勭増鏈劅瑙夌敤璧锋潵寰堟柟渚裤€傚湪姝よ褰曚竴涓嬪疄鐜拌繃绋嬶紝甯屾湜鑳藉府鍔╅亣鍒板悓鏍峰洶鎯戠殑浜恒€倀ips锛氾紙鏈枃涓嶄細涓€寮€濮嬪氨鏁欎綘濡備綍鍐欐牱寮忓拰浠ｇ爜锛岃€屾槸涓€姝ユ甯姪浣犱簡瑙ｇ浉鍏崇殑闄勫姞鐭ヨ瘑銆傚畠浼氫互鈥滃鏋滄垜鏄垵瀛﹁€咃紝濡傛灉鏈変汉鍛婅瘔鎴戯紝鎴戝ぇ姒傝兘鐪嬫噦鈥濇潵璁茶В銆傛墍浠ユ瘮杈冮暱锛屾兂鐩存帴鐪嬬粍浠跺疄鐜扮殑鍙互鐩存帴璺冲埌Title3锛夊湪姝ょ澶у涓鑺傚揩涔悀~馃ギ浠ヤ笅鏄鏂囷細涓€.Pre-tasks:JSX鍜屾覆鏌撳嚱鏁扮殑姒傚康瑕佸畬鎴愯繖涓渶姹傦紝浣犻渶瑕佺悊瑙ｉ鐩殑涓や釜姒傚康銆傚畼鏂规枃妗ｅ湪杩欓噷锛岄噷闈㈢殑瀛楃溂澶€滀笓涓氬拰瀹樻柟鈥濅簡锛屽垰寮€濮嬬湅鐨勬椂鍊欒鎴戝緢杩疯尗锛屾墍浠ヨ繖閲屾垜甯ぇ瀹剁湅鎳傞噷闈竴浜涘緢瀹樻柟鐨勮瘝锛岃澶у蹇€熺悊瑙ｃ€傚師鏂囧湴鍧€鍦ㄨ繖閲岋細vue瀹樻柟鏂囨。JSX鍜屾覆鏌撳姛鑳姐€傛垜浠笉闇€瑕佷簡瑙ｆ暣涓覆鏌撴満鍒剁殑娴佺▼鎴憂娣卞害鍛€傛墍浠ユ殏鏃朵笉瑕佹煡鐪嬩笅闈㈢殑瀹樻柟閾炬帴锛屼細瓒婄湅瓒婃檿銆備絾鏄繖閲屾垜瑕佽鏄庝竴鐐癸紝鎺ヤ笅鏉ョ殑鍐呭鏄熀浜庢垜榛樿浣犲铏氭嫙DOM鐨勬蹇垫湁涓€瀹氱殑浜嗚В銆傜劧鍚庡啓鍒癡ue缁欐垜浠彁渚涗簡鍒涘缓vnode鐨勫姛鑳姐€傞槄璇绘湰椤垫椂锛屼竴瀹氳娉ㄦ剰姣忔浠ｇ爜鍙充笂瑙掔殑瀹樻柟鏂囦欢绫诲瀷銆傝繖閲岄渶瑕佹彃鍏ヤ竴涓繀椤荤悊瑙ｇ殑棰樺璇濄€備簡瑙eact鐨勫悓瀛︿竴瀹氱煡閬擄紝Vue涓璊SX鐨勬蹇靛拰React涓璊SX鐨勬蹇甸潪甯哥浉浼笺€俈ue涔熷€熼壌浜哛eact鐨勮繖涓兂娉曘€傝繖閲屾垜浠潃閲嶄簬鐢荤嚎銆傦紙涓嶇啛鎮塺eact鐨勬湅鍙嬩笉鐢ㄦ媴蹇冿紝鏈枃瀹炵幇鐨凾oast骞舵病鏈変娇鐢↗SX鍜宐abel銆傦級鏄笉鏄寰楀拰瀹樻柟鍒氬垰鍐欑殑Vue寰堝儚锛熶笂闈㈠畼鏂逛篃鎻愬埌浜唄鏄粈涔堛€傚鏋滄垜浠妸h鎹㈡垚createVnode()锛屾槸涓嶆槸鍜孯eact.createElement鐨勭敤娉曠被浼硷紵鍏跺疄鏃犺鏄疺ue鐨刪()杩樻槸React.createElement()锛屽畠浠殑鏈€缁堢洰鐨勯兘鍙湁涓€涓細鍒涘缓铏氭嫙DOM銆傝€岃繖涓篃瀵瑰簲Vue涓璫reateVnode鐨刅node鍏跺疄灏辨槸铏氭嫙鑺傜偣鐨勬剰鎬濄€傜洿鎺ョ炕璇戝嚱鏁板悕鍏跺疄灏辨槸鍒涘缓铏氭嫙鑺傜偣銆傝€孞SX鍙槸鍒涘缓virtualdom鐨勮娉曢棶棰橈紝浠呮鑰屽凡锛屾病浠€涔堢壒鍒殑銆?銆乧reateVnode鍑芥暟鐨勫惈涔夌幇鍦ㄦ垜浠湪.vue鏂囦欢涓紪鍐欏涓嬩唬鐮併€傚緢绠€鍗曠殑缁撴瀯锛屼竴涓猧d涓衡€渉anzhenfang鈥濈殑div鏍囩锛屾爣绛惧唴瀹规槸鎴戠殑鍚嶅瓧銆俹k锛岃繖鏍峰啓鐨勮瘽锛寁ue浼氬府鎴戜滑鎶婅繖涓粨鏋勪綋杞崲鎴愯櫄鎷焏om銆傛湰璐ㄤ笂锛宧("div",{id:"hanzhenfang"},"HanZhenfang")h()鍙互鏈夊涓弬鏁般€傝繖娈典唬鐮佸啓鍦?template>鏍囩涓紝瀹冪殑搴曞眰鍏跺疄鏄娇鐢╤()鍑芥暟瀹炵幇鐨勩€傝鐧戒簡锛孯eact浣跨敤JSX浣滀负娓叉煋铏氭嫙dom鍑芥暟鐨勮娉曠硸銆?template>鏍囩鏄疺ue鐢ㄦ潵娓叉煋铏氭嫙dom鐨勮娉曠硸銆傝繖鍙互寮曞嚭瀹樻柟鏍囧噯瑙ｉ噴锛氫綘鍙兘浼氭湁鐤戞儜锛屾棦鐒舵ā鏉胯兘瀹炵幇杩欐牱鐨勫姛鑳斤紝閭ｆ垜鍐欎釜妯℃澘灏卞畬浜嬩簡锛熸垜闇€瑕佸啓浠€涔坔()鍑芥暟锛熷洜涓烘湁浜涘満鏅湡鐨勬槸妯℃澘鍋氫笉鍒扮殑銆傝繖涔熸槸鎴戝啓杩欑瘒鏂囩珷鐨勫師鍥狅紝鍥犱负杩欎釜toast闇€瑕佸湪寰堝鍦烘櫙涓嬩娇鐢紝鎴戞€讳笉鑳藉湪姣忎釜鍦版柟閮藉紩鍏ヤ竴涓粍浠讹紝閫氳繃v-if鏉ユ帶鍒跺畠鐨勬樉绀哄拰鍏抽棴鍚э紵闈炲父绻佺悙鍜岄夯鐑︺€?.缂栧啓Toast缁勪欢锛堜笉甯sx锛夐鍏堝垱寤轰竴涓猼oast.vue鏂囦欢锛屽啓鍑哄ぇ鑷寸殑鏍峰紡銆傜敱浜庝娇鐢ㄤ簡tailwindCss锛屾牱寮忓啓娉曞彲鑳藉拰浼犵粺鐨剆tyle鏍囩鍐欐硶涓嶅悓鈥嬧€嬶紝浣嗘槸鍘熺悊鏄竴鏍风殑锛屼笉鐢ㄦ媴蹇冦€傚疄鐜版柟寮忓涓嬶細toast鍦ㄥぇ澶氭暟鍦烘櫙涓嬮兘鏄眳涓殑锛屽畠鑴辩鏂囨。娴侊紝浣嶄簬鏁翠釜椤甸潰鐨勯《閮紝鎵€浠ユ垜杩欓噷閲囩敤浼犵粺鐨勭粷瀵瑰畾浣嶆柟妗堛€傜粷瀵瑰畾浣嶆渶绠€鍗曠殑灞呬腑鏂规灏辨槸璁剧疆top鍜宭eft鍚?0%銆備絾鏄紝鎴戜滑涓嶈蹇借涓€鐐广€傚亸绉荤殑鏃跺€欙紝鎴戜滑瑕佸噺鍘昏嚜宸辩殑瀹藉害鍜岄珮搴︾殑涓€鍗婏紝鎵嶈兘杈惧埌瀹屽叏灞呬腑銆備絾鏄紝鑰冭檻鍒板鐢ㄦ€э紝鎴戜滑toast鐨勫搴︿笉鑳借缃垚涓€涓浐瀹氱殑瀹藉害銆傚叿浣撳搴︾敱褰撴椂鏂囧瓧鐨勫ぇ灏忓喅瀹氥€傝繖鏃跺€欐垜浠氨闇€瑕佺敤鍒皁ffsetWidth1銆傝ˉ鍏卭ffsetWidth鐨勯檮鍔犳妧宸ф垜浠厛鐪嬬湅MDN鏄€庝箞瑙ｉ噴鐨勩€備綘鍒板簳浠€涔堟剰鎬濓紵鎴戜滑闅忎究鍐欎竴涓緢绠€鍗曠殑妯℃澘銆傛垜浠幇鍦ㄤ笉娣诲姞浠讳綍css灞炴€э紝鎴戜滑鏉ョ湅鐪媜ffsetWidth鐨勫€兼槸澶氬皯銆備笉瑕佹妸璋冭瘯宸ュ叿浠呬粎褰撲綔console.log鐨勫湴鏂癸紝涓€瀹氳鐢ㄥソ杩欎釜宸ュ叿銆傛垜浠€夋嫨鍒氬垰缂栧啓鐨勫厓绱狅紝鐒跺悗鍗曞嚮璋冭瘯宸ュ叿閫夐」鏍忎腑鐨勨€滃睘鎬р€濋€夐」鍗°€傚彲浠ョ湅鍒皁ffsetWidth褰撳墠鏄?0锛堟敞鎰忚繖鏄竴涓病鏈夊崟浣嶇殑鍗佽繘鍒舵暟绫诲瀷锛屾槸鍙灞炴€э紝涓嶈兘鐩存帴鏀瑰彉銆傦級20鏄€庝箞鏉ョ殑鍛紵鍏跺疄灏辨槸鎴戜滑璁剧疆鐨勫瓧浣撳ぇ灏忋€備负浜嗛獙璇佺寽鎯筹紝璁╂垜浠皢瀛椾綋澶у皬璁剧疆涓?5px锛岀幇鍦ㄧ粰杩欎釜div娣诲姞涓€涓?0px瀹藉害鐨勮竟妗嗐€傚厛涓嶅叧蹇僶ffsetWidth鐨勫€硷紝鎴戜滑鏍规嵁瀹冪殑瀹氫箟鏉ョ寽涓€鐚溿€傚畠搴旇绛変簬15px+10px鐨勫瓧浣撳ぇ灏忓悧锛烝reyousure锛屽埆蹇樹簡border浠庝笂鍒颁笅锛宭eft锛宺ight閮芥槸10px锛屾墍浠ユ牴鎹寽娴媊offsetWidht=15px+10px+10px濡傛灉鎴戜滑鑷繁璁剧疆杩欎釜div鐨勫搴﹀憿锛熻鎴戜滑缁欏畠涓€涓?00px鐨勫搴︺€傛垜浠細鍙戠幇offsetWidth鐨勫€煎彉鎴愪簡100锛屼絾鏄垜鏄庢槑杩樻湁10px鐨勮竟妗嗭紒瀹冨幓鍝効浜嗭紵浣犲繕浜嗘垜浠幇鍦ㄥぇ澶氭暟鎯呭喌涓嬮兘浣跨敤box-size:border-box鍚楋紵璁剧疆鐨勫搴﹀寘鎷竟妗嗐€備负浜嗛獙璇侊紝璁╂垜浠洿鏀筨ox-size鐨勭被鍨嬨€傚彲浠ョ湅鍒皁ffsetWidth鍙樻垚浜?00px+10px+10px鎻愮ず锛氫絾鏄湪鏈枃涓紝鎴戜滑涓嶄細璁剧疆涓€涓浐瀹氱殑瀹藉害鏉ラ檺鍒惰繖鍥涗釜銆俆oast灞呬腑鐨勬€濊矾1.鐜板湪鎴戜滑鍙互涓嶈缃甌oast鐨勫搴︼紝鏍规嵁鏂囨湰鐨勫灏戞潵鑾峰彇鏀瑰彉鐨勫搴︺€傜敱浜庤繖涓睘鎬у彧鏈夊湪缁勪欢鎸傝浇鍚庢墠鏈夛紝鎵€浠ユ垜浠彲浠ュ湪onMounted涓幏鍙栥€傞鍏堥渶瑕佽幏鍙栧厓绱犳湰韬紝杩欓噷鎴戜滑浣跨敤ref鐨勬柟娉曘€傚叿浣撶殑鍙橀噺鍜屼唬鐮佸涓嬶細浣嗘槸璇寸殑璇︾粏涓€鐐癸紝鎴戜滑闇€瑕侀€氳繃涓€涓绠楀睘鎬ф潵鍔ㄦ€佽绠楀嚭缁勪欢鐨勬牱寮忥紱ok锛岃繖鏍峰氨杈惧埌浜嗗眳涓殑鏁堟灉銆傛垜浠浣曟洿鏀瑰唴瀹瑰苟涓嶉噸瑕併€傚眳涓晥鏋滄槸閫氳繃鍔ㄦ€佽绠楀緱鍒扮殑锛屽苟涓嶆槸涓€寮€濮嬪氨纭紪鐮佺殑銆?.Toast涓夌鍑虹幇浣嶇疆鐨勬€濊矾鍦ㄦ煇浜涘満鏅笅锛孴oast鍑虹幇鍦ㄥ簳閮ㄥ苟涓嶆槸鐗瑰埆鍚堥€傦紝鎵€浠ユ垜浠繕闇€瑕佽€冭檻鍑虹幇浣嶇疆鐨勯棶棰樸€傝繖鏄彟澶栦袱绉嶇畝鍗曠殑璁捐锛屼竴绉嶅湪涓棿锛屼竴绉嶅湪椤堕儴銆傚疄鐜拌捣鏉ヤ篃姣旇緝绠€鍗曘€傛垜浠toastWrapperStyle璁＄畻top鐨勫亸绉婚噺涔熸槸鍔ㄦ€佽绠椼€傚悗闈㈡垜浠彲浠ョ粰杩欎釜缁勪欢浼犲弬鏁帮紝鎺у埗鍏蜂綋浣嶇疆鍦ㄥ摢閲屻€傜洰鍓嶇殑浠ｇ爜涔熸槸鍦ㄥ姩鎬佹樉绀烘晥鏋滐紝杩欎釜鎴戜滑鍚庨潰浼氭參鎱綋鐜般€俆ips锛氫互涓嬬珷鑺傛槸鏈枃鐨勯噸鐐广€?.鐨勪娇鐢╤()鍑芥暟銆傛垜浠垱寤轰竴涓猼oastCreator.ts鏂囦欢锛屾柟渚垮姛鑳借皟鐢ㄦ樉绀篢oast缁勪欢銆傚噯澶囦互涓嬪唴瀹广€傝繖閲岄渶瑕佺敤鍒颁笂闈㈡彁鍒扮殑h()锛岃繕鏈塺ender()銆傛殏鏃讹紝浣犲彲浠ユ妸render鐞嗚В涓鸿繑鍥炰竴涓湡瀹炵殑DOM缁欎綘銆傚洜涓篽()鐢熸垚鐨勬槸铏氭嫙dom锛屼絾鏄垜浠渶缁堝湪椤甸潰涓婂睍绀虹殑鏄湡瀹炵殑dom銆傛垜浠笉闇€瑕佸湪