鍓嶈█锛氫粖澶╁湪椤圭洰涓亣鍒颁簡寰堝闇€瑕佸脊鍑哄璇濇鐨勫満鏅€傚洜涓轰箣鍓嶉兘鏄敤v-if鏉ユ帶鍒惰繖涓粍浠剁殑鏄剧ず锛屾墍浠ュ鑷村緢澶氶〉闈㈣帿鍚嶅叾濡欑殑鍔犱簡寰堝涓嶇浉鍏崇殑浠ｇ爜锛屾瀬鍏朵笉闆呰銆傛墍浠ユ垜灏濊瘯瀹炵幇涓€涓甫鏈夊嚱鏁拌皟鐢ㄧ殑瀵硅瘽妗嗙粍浠躲€傛劅瑙夊湪绠€鍗曠殑鍦烘櫙涓嬭繕鏄瘮杈冨ソ鐢ㄧ殑銆傛垜鎯冲垎浜繖涓兂娉曘€傪煄?.鍓嶆湡鍑嗗鍜屾垜涓€璧峰畬鎴愯繖涓姛鑳借皟鐢ㄥ璇濇闇€瑕佸垱寤轰袱涓枃浠讹紝Dialog.vue鍜宒ialogCreator.ts銆?.瀵硅瘽妗嗘帺鐮佺殑鏍峰紡鎴戠殑缁勪欢鏍峰紡鏄敤UnoCss鍐欑殑锛屽氨鏄妸鏍峰紡宓屽叆鍒版爣绛剧殑class灞炴€т腑銆傛晥鏋滃拰浣犲湪Style鏍囩閲屽啓鐨勫畬鍏ㄤ竴鏍枫€傛偍涓嶅繀鎷呭績鍐欎綔椋庢牸銆傛枃浣撲笌鏈枃涓昏鍐呭鏃犵洿鎺ュ叧绯汇€傝繖閲屾垜浠€夋嫨鍏堝啓涓€涓猰ask銆傚叧浜庤挋鐗堢殑鍏抽敭鐐规槸璁剧疆涓€涓◢寰€忔槑鐨勮儗鏅€傛垜閫夋嫨浜唕gba(0,0,0,0.4)锛岃繖鏄竴涓函榛戣壊鑳屾櫙锛岄€忔槑搴︿负0.4銆傞鑹层€傝繖閲岄渶瑕佺壒鍒敞鎰忋€傜敱浜庢垜浠殑閬僵浼氬嚭鐜板湪鈥滃叾浠栭〉闈箣涓娾€濓紝鍥犳鎴戜滑闇€瑕佸湪鏁翠釜缁勪欢涔嬪璁剧疆涓€涓粷瀵瑰€硷紝浣垮叾鐙珛浜庡叾浠栭〉闈€備负浜嗛槻姝竴浜涜竟鐣屾潯浠讹紝鎴戜滑闇€瑕佽缃畓-index:9999鏉ヤ繚璇佽繖涓〉闈細鍦ㄦ暣涓簲鐢ㄤ箣涓娿€傛暣浣撴晥鏋滃涓嬶細3.瀵硅瘽妗嗙殑鏍峰紡鍏充簬瀵硅瘽妗嗙殑鏍峰紡锛屾垜浠繖閲屼笉缁熶竴璁剧疆锛屼絾鏄垜浠殑缁勪欢鑷冲皯闇€瑕佸寘鍚笁涓富瑕佸厓绱犮€傛爣棰樺尯鍩熴€佸唴瀹瑰尯鍩燂紝鏈€鍚庢槸鍙栨秷鎸夐挳鍜岀‘瀹氭寜閽殑鍖哄煙銆傝繖閲屽彲浠ユ殏鏃舵妸鏂囧瓧鍐欐垚鍥哄畾鍊硷紝鍚庨潰浼氳瑙ｅ浣曢€氳繃props鍔ㄦ€佷紶閫掕繖浜涘€笺€?銆乭鍑芥暟鍜宺ender鍑芥暟鐨勪娇鐢ㄦ垜浠墦寮€涔嬪墠鍑嗗濂界殑dialogCreator.ts鏂囦欢锛屽鍏ュ垰鎵嶅啓鐨凞ialog缁勪欢锛屽悗闈細鐢ㄥ埌銆傚湪姝や箣鍓嶆垜浠繕闇€瑕佷粙缁嶄竴涓嬩袱涓€佹湅鍙媓锛宖unction鍜宺enderfunction銆傜湅杩囨垜涔嬪墠鐨勬枃绔犮€婂浣曞垱寤轰竴涓叏灞€鎼滅储妗嗮煍嶃€嬪拰銆婂浣曞垱寤轰竴涓?Toast銆嬬殑鏈嬪弸浠竴瀹氬杩欎袱涓嚱鏁扮殑鍚箟寰堢啛鎮夛紝浣嗘槸涓轰簡鐓ч【鏂版墜鏈嬪弸锛屾垜杩樻槸绠€鍗曡鏄庝竴涓嬭繖涓や釜鍑芥暟鐨勪富瑕佺敤閫斻€傜浉淇″ぇ瀹跺Vue娓叉煋缁勪欢鐨勮繃绋嬮兘鏈変竴涓ぇ姒傜殑浜嗚В銆俈ue棣栧厛鏋勫缓涓€涓櫄鎷焏om锛岀劧鍚庡熀浜庤櫄鎷焏om娓叉煋涓€涓湡瀹炵殑dom銆傝繖閲屾垜浠渶瑕佹竻妤氱殑鐭ラ亾锛孷ue鎻愪緵鐨勬ā鏉挎爣绛惧彧鏄竴涓娉曠硸锛屽彲浠ヨ鎴戜滑鐢ㄧ啛鎮夌殑html鏍囩鏉ョ紪鍐欒櫄鎷焏om銆傛槸鐨勶紝浣犳病鏈夊惉閿欙紝瀹冨彧鏄竴涓娉曠硸锛屽畠鐨勫簳灞備細琚紪璇戞垚涓€涓敤h鍑芥暟鍒涘缓鐨勮櫄鎷焏om锛岃繖灏卞紩鍑轰簡杩欓噷瀹樻柟鐨勮В閲娿€傞偅涔堜笂闈㈣鐨勫畼鏂规覆鏌撳嚱鏁版槸浠€涔堝憿锛熷叾瀹炲氨鏄垜浠垰鎵嶈鐨刪鍑芥暟銆俬()鍑芥暟鏇村噯纭殑鍚嶅瓧鍏跺疄搴旇鏄痗reateVnode()锛屼笌鍏惰嫳鏂囩炕璇戜竴涓€瀵瑰簲锛屽垱寤鸿櫄鎷烡om銆傚浣曚娇鐢ㄨ繖涓姛鑳斤紵鎴戜滑浠庡疄鎴樹腑鏉ョ悊瑙ｏ紝缁х画鍐欐垜浠殑DialogCreator绫伙紝鎴戜滑鍒涘缓涓や釜鍑芥暟锛屼竴涓彨present鏂规硶鎺у埗瀵硅瘽妗嗙殑鍑虹幇锛屼竴涓彨dismiss鏂规硶鎺у埗瀵硅瘽妗嗘秷澶便€傝繖閲岄┈涓婂氨瑕佺敤鍒板垰鍒氭彁鍒扮殑h鍑芥暟銆俬鍑芥暟鐨勭涓€涓弬鏁板彲浠ユ帴鏀朵竴涓粍浠朵綔涓哄疄鍙傦紝骞跺皢杩欎釜缁勪欢鐨勮櫄鎷焏om杩斿洖缁欐垜浠€傝繖鏍锋垜浠氨鍙互濡備笅鑾峰彇鎴戜滑闇€瑕佺殑Dialog缁勪欢鐨勮櫄鎷焏om銆傚緱鍒拌櫄鎷焏om鏈変粈涔堢敤锛熻繖閲岄渶瑕佷粙缁嶄竴涓嬫垜浠殑绗簩涓叧閿嚱鏁皉ender鍑芥暟銆傛垜浠渶瑕佺煡閬擄紝鎴戜滑鐩墠鍙緱鍒颁竴涓笌鐪熷疄dom鑺傜偣鍒嗙鐨勨€滃亣dom鈥濊妭鐐癸紝浣犻渶瑕佸憡璇夊畠鍘诲摢閲屾覆鏌撱€傝繖鎰忓懗鐫€浠€涔堬紵鎵撳紑鎴戜滑鐨刴ain.ts鏂囦欢銆傛案杩滀笉瑕佸繕璁拌繖涓?app鏄粈涔堛€傚畠鏄垜浠笘鐣屼笂鍞竴鐨勭湡瀹瀌om锛屼竴涓畝鍗曟湸瀹炵殑id锛屽彨鍋歛pp鐨勭湡瀹瀌om銆傜劧鍚庢垜浠瀵熸垜浠殑娓叉煋鍑芥暟鍙互鎺ユ敹鍝簺鍙傛暟绫诲瀷銆傜湅涓嬪浘涓垜鐢婚粍绾跨殑鍦版柟銆傜湅鍒颁粈涔堟儕鍠滀簡鍚楋紵绗竴涓弬鏁版槸涓€涓獀node銆備粈涔堬紵vnode锛屾垜鏄笉鏄垰鍒氶€氳繃h(Dialog)鍑芥暟寰楀埌浜嗕竴涓獀node锛熸病閿欙紝濡傛灉浣犺仾鏄庣殑璇濓紝搴旇鑳界寽鍑轰笅闈㈢殑鍐欐硶銆俥mm涓嶈繃濂藉儚鏄姤閿欎簡锛屾垜浠湅涓€涓嬫姤閿欎俊鎭€傦紙杩欓噷鎴戜滑蹇界暐绗笁涓弬鏁帮紝鍙€冭檻涓や釜鍙傛暟銆?馃锛屽鍣ㄥ弬鏁扮殑绫诲瀷鏄厓绱犺繕鏄疭hadomRoot锛岃繖鏄粈涔堥锛熸垜浠户缁偣鍑籸ender鍑芥暟锛岃繘鍏ュ畠鐨勫畾涔夛紝鍙戠幇瀹瑰櫒绔熺劧鏄竴涓狧ostElement绫诲瀷銆傜湅鏉ュ紕娓呮杩欎釜HostElement鎵嶆槸鍏抽敭銆?1銆佽繖閲屾垜浠崲涓€濊矾锛屾垜浠€嗗悜鎺ㄦ柇HostElement鏄粈涔堛€傛垜浠啀鎵撳紑main.ts鏂囦欢锛岃繖娆¤烦杞埌mount鍑芥暟鐨勫畾涔夛紝涔熷氨鏄笅鍥句腑榛勮壊鍦堝嚭鐨勫嚱鏁般€備綘鐪嬪埌浜嗕粈涔堬紵瀵逛簡锛岀啛鎮夌殑鍑犱釜璇岺ostElement锛屾敞鎰忥紝浣犱竴瀹氫笉浼氳寰楄繖涓狧ostElement鏄釜绁炲鐨勫厓绱狅紝璁╂垜浠洖蹇嗕竴涓嬫寕杞藉嚱鏁扮殑鍙傛暟鏄粈涔堬紵娌￠敊锛岃繕鏄偅涓櫘閫氱殑锛屽叏灞€鐨勭湡瀹瀌om锛屽彨app銆傜敱姝ゆ垜浠彲浠ュ弽杩囨潵鎺ㄦ柇锛宺ender鍑芥暟闇€瑕佷竴涓湡瀹炵殑dom鏉ュ寘瑁规垜浠殑铏氭嫙dom銆傜敓鎴愪竴涓湡姝ｇ殑dom涓嶆槸寰堝鏄撳悧锛熸垜浠洿鎺ヨ皟鐢╦s鏂规硶createElement('div')鏉ョ敓鎴愪竴涓櫘閫氱殑div鍏冪礌鏉ュ寘瑁呮垜浠殑铏氭嫙dom銆?.鏀硅繘DialogCreator绫荤幇鍦ㄥ畠杩樺憡璇夎櫄鎷烡ialog缁勪欢搴旇鏀惧湪鍝噷銆傛帴涓嬫潵锛屾垜浠渶瑕佸皢鎴戜滑鐨刢ontainerEl鏀惧湪姝ｇ‘鐨勪綅缃€傛垜浠簲璇ユ妸瀹冩斁鍦ㄥ摢閲岋紵鍥犱负鎴戜滑鐨勫璇濅竴鑸兘鍦ㄩ《灞傘€傚彧鏄彁閱掓偍锛屼笉瑕佸繕璁版垜浠墍鏈夊叾浠栭〉闈㈤兘鏀惧湪id涓篴pp鐨刣iv鏍囩涓€傞偅涔堜负浜嗕繚璇佸畠缁濆鍑虹幇鍦ㄦ渶鍓嶉潰锛屼笉琚叾浠栭〉闈㈡尅浣忥紝鎴戜滑鏉ュ欢浼镐竴涓嬫€濊矾銆傚鏋滄垜浠鎴戜滑鐨凞ialog鎴愪负body鏍囩鐨勭涓€涓瓙鍏冪礌锛屽苟涓斿洜涓烘垜浠粰Dialog缁勪欢璁剧疆浜哸bsolute灞炴€э紝閭ｄ箞瀹冨氨浼氭伆濂藉嚭鐜板湪鎴戜滑鎵€鏈夌殑椤甸潰涓娿€傜敱浜庡畠鑴辩浜嗘枃妗ｆ祦锛屾墍浠ュ畠鐨勫嚭鐜颁笉浼氬奖鍝嶆垜浠叾浠栭〉闈㈢殑甯冨眬銆傛槸涓嶆槸寰堢畝鍗曪紵濡備綍鎴愪负body鐨勭涓€涓瓙鍏冪礌鏄熀鏈殑鏂规硶锛岃繖閲屽氨涓嶅瑙ｉ噴浜嗐€傝€岃鍏冪礌娑堝け鐨勬柟娉曞氨鏇寸畝鍗曚簡锛岄€傛椂绉婚櫎dom鍏冪礌鍗冲彲銆傝鎴戜滑娴嬭瘯涓€涓嬪畠鏄惁鍙銆傛垜浠湪浠绘剰椤甸潰璋冪敤鎴戜滑鐨凞ialogCreator绫伙紝璋冪敤new鐢熸垚涓€涓狣ialog瀹炰緥銆傞偅涔堝氨鍐欎袱涓寜閽皟鐢ㄨ繖涓や釜鏂规硶鏉ユ祴璇曞惂銆傛晥鏋滃涓嬶細浣嗘槸鍥犱负鎴戜滑鐨勨€滈伄缃┾€濇尅浣忎簡鎴戜滑鐨勬寜閽紝鎵€浠ユ垜浠幇鍦ㄤ笉鑳界偣鍑绘秷澶辨寜閽€備互涓嬮摼鎺ユ槸鏈枃鐨勯噸鐐广€傚鏋滄垜浠皢鑷畾涔夌殑鍐呭浼犻€掔粰瀵硅瘽妗嗭紝鎴戜滑鍙互鐏垫椿鍦扮敓鎴愪竴涓珮搴﹁嚜瀹氫箟鐨勫唴瀹广€傚璇濇銆?.绁炲鐨刪鍔熻兘鐩墠锛屾垜浠殑瀵硅瘽妗嗗彲浠ュ嚭鐜板湪鎴戜滑鐨勯〉闈笂锛屼絾鐜板湪瀹冪殑鍐呭鏄‖缂栫爜鐨勶紝涓嶇伒娲荤殑銆傛垜浠渶瑕佹牴鎹笉鍚岀殑鍦烘櫙浼犻€掍笉鍚岀殑鏂囨湰銆傚浣曞疄鐜帮紵杩欓噷闇€瑕佽鏉ユ垜浠殑鑰佹湅鍙嬶紝h鍑芥暟銆傝繖閲屾垜鍏堟姏鍑烘蹇碉紝绛夋垜浠竴姝ユ鍘婚獙璇併€俬鍑芥暟鍙互鎺ユ敹绗簩涓弬鏁帮紝绗簩涓弬鏁扮殑鍊间細杞寲涓簆rops浼犻€掔粰鎴戜滑鐨勭粍浠躲€傝鎴戜滑鍥炲埌dialogCreator.ts鏂囦欢銆傛垜浠０鏄庝竴涓被鍨嬶紝鐢ㄤ綔DialogCreator鍐呴儴鏋勯€犲嚱鏁板弬鏁扮殑绫诲瀷銆傚苟澹版槑涓や釜绫荤殑灞炴€itle鍜宑ontent浣滀负props浼犻€掔粰鎴戜滑鐨凞ialog.vue缁勪欢銆傛垜浠繕缂哄皯涓€涓叧閿殑涓滆タ锛屽氨鏄彇娑堟寜閽拰纭畾鎸夐挳鐨勫姛鑳斤紝鎴戜滑涓€璧峰０鏄庛€傦紙杩欓噷瑕佹敞鎰忥紝涓€鑸殑鍙栨秷鎸夐挳鏄叧闂璇濇鐨勫姛鑳斤紝涔熷氨鏄被鏈韩鐨刣ismiss鏂规硶锛屾墍浠ユ垜浠笉闇€瑕佺敤鎴锋彁渚涢澶栫殑鍑芥暟鏉ヨ幏鍙栨寜閽紝浣嗘槸鍙渶瑕佸湪纭鏃舵彁渚涘洖璋冨嚱鏁板嵆鍙€傦級杩欓噷闇€瑕佽鑰呯粏缁嗕綋鍛充互涓婁唬鐮佺殑鍚箟銆傛帴涓嬫潵锛屾垜浠渶瑕佸皢this.option浼犻€掔粰h鍑芥暟銆傛姤閿欎篃娌″叧绯伙紝鍥犱负鎴戜滑杩樻病鏈夊湪Dialog.vue缁勪欢鍐呴儴瀹氫箟Props銆傝鎴戜滑浠巇ialogCreator.ts鏂囦欢涓鍑篋ialogPropsType绫诲瀷锛岀劧鍚庝粠Dialog.vue涓鍏ヨ绫诲瀷鏉ュ畾涔夐亾鍏枫€傜劧鍚庡彲浠ョ湅鍒版垜浠垰鍒氬埌鐨勬姤閿欏凡缁忔秷澶变簡锛岃鏄庢垜浠殑鎬濊矾娌￠棶棰樸€?.鏀归€燚ialog.vue缁勪欢銆傛垜浠厛鎶婁箣鍓嶅浐瀹氬ソ鐨勬爣棰樺拰鍐呭鏇挎崲鎴愭垜浠０鏄庣殑閬撳叿涓殑鏍囬鍜屽唴瀹广€傜劧鍚庡埆蹇樹簡锛屾垜浠殑props杩樺瓨鍌ㄤ簡銆婄‘瀹氥€嬪拰銆婂彇娑堛€嬬殑鏂规硶銆傚皢鍏跺彇鍑哄苟鍒嗗埆鏀惧湪涓や釜鎸夐挳涓娿€傞殢渚挎壘涓〉闈紝娴嬭瘯涓€涓嬪垰鎵嶇殑DialogCreator绫汇€傚垰鍒氬啓浜嗗唴瀹癸紝鎴戜滑鏉ユ祴璇曚竴涓嬶細8.閬僵鐨勫叧闂晥鏋滅幇鍦ㄦ垜浠笉鑳介€氳繃鐐瑰嚮閬僵鏉ュ叧闂璇濇浜嗐€傛晥鏋滃涓嬶細鏄粈涔堝鑷翠簡杩欑鎯呭喌鍘熷洜涔熷緢绠€鍗曪紝鍥犱负鎴戜滑鐨刴ask娌℃湁鐐瑰嚮浜嬩欢锛屾€庝箞鍔烇紵杩欓潪甯搁潪甯哥畝鍗曘€傜粰mask鍔犱笂cancelBtn锛屼篃灏辨槸dismiss鏂规硶涓嶅氨琛屼簡鍚楋紵娴嬭瘯涓€涓嬶紝鐜板湪鐐瑰嚮閬僵鍙互姝ｅ父鍏抽棴瀵硅瘽妗嗕簡銆?.淇鍐掓场瀵艰嚧鐨刡ug銆傜湅璧锋潵鍔熻兘宸茬粡寰堟浜嗭紝浣嗘槸鐜板湪鐨勪唬鐮佷細瀵艰嚧涓ラ噸鐨刡ug銆傚綋鎴戜滑鐐瑰嚮瀵硅瘽妗嗘湰韬椂锛岀敱浜庝簨浠跺啋娉★紝浼氳瑙﹀彂閬僵灞傜殑鏂规硶銆傝鎴戜滑楠岃瘉涓€涓嬶紝鎴戜滑鍙槸缂栧啓浜嗕竴涓嚱鏁板苟灏嗗叾缁戝畾鍒板璇濇缁勪欢銆傛敞鎰忥細杩欓噷鐨勫璇濇鏄寚涓棿鐨勫疄闄呭璇濇鏈韩锛岃€屼笉鏄暣涓粍浠躲€傜劧鍚庡湪cancelBtn涓姞鍏ヤ竴琛宑onsole.log鏉ユ祴璇曚竴涓嬨€傛晥鏋滃涓嬶細瑙ｅ喅鏂规绠€鍗曠殑鍑轰箮浣犵殑鎰忔枡锛岃鎴戜滑鍥炲埌涓棿鐨勫璇濇锛屾垜浠彧闇€瑕佺粦瀹氫竴涓┖鐨勭偣鍑诲嚱鏁帮紝鐒跺悗鍔犱笂淇グ绗top銆傛晥鏋滃涓嬨€傚彲浠ョ湅鍒扮幇鍦ㄧ偣鍑诲璇濇涓嶄細璇叧闂暣涓璇濇銆傝嚦姝ゆ垜浠殑瀵硅瘽妗嗙粍浠跺彲浠ュ湪澶ч儴鍒嗗満鏅笅浣跨敤銆傪煄侊綖鎬荤粨鐩墠鐨勪唬鐮佸彧鏄竴涓緢绮楃暐鐨勫疄鐜帮紝鏇村鍏蜂綋瀹炵敤鐨勫姛鑳介渶瑕佽鑰呮牴鎹嚜宸遍」鐩殑闇€瑕佹潵瀹屾垚銆備笅闈㈡槸DialogCreator.ts鏂囦欢鐨勪唬鐮併€傝鑰呭彲鏍规嵁闇€瑕佽嚜琛屾煡闃呫€備粠鈥?/Dialog.vue鈥濆鍏ュ璇濇锛涗粠鈥渧ue鈥濆鍏h锛屾覆鏌搣锛涙帴鍙ialogType{鏍囬锛氬瓧绗︿覆锛涘唴瀹癸細瀛楃涓诧紱confirmBtn:()=>void;}exportinterfaceDialogPropsTypeextendsDialogType{closeBtn:()=>void;}exportclassDialogCreator{containerEl:HTMLDivElement;閫夐」锛欴ialogPropsType锛涙瀯閫犲嚱鏁帮紙閫夐」锛欴ialogType锛墈this.containerEl=document.createElement锛堚€渄iv鈥濓級;this.option={...option,closeBtn:this.disMiss.bind(this)};}present(){constvnode=h(Dialog,this.option);娓叉煋锛坴node锛宼his.containerEl锛夛紱document.body.insertBefore(this.containerEl,document.body.firstChild);}disMiss(){render(null,this.containerEl);document.body.removeChild(this.containerEl);}//瀵硅瘽妗嗘秷澶辩殑鏂规硶}
