鍓嶈█锛氭渶杩戝湪鍏徃鐨凱C绔」鐩腑锛岀敤鍒颁竴涓伐浣滈渶姹傦紝鍑虹幇鍙抽敭鑿滃崟閫夐」锛岀幇鍦ㄥ疄鐜颁竴涓€濊矾鏄棤鎰忛棿鐖嗗嚭锛堟兂鐢ㄥ墠绔疄鐜颁竴涓猈indows绯荤粺浠庡紑鏈哄埌妗岄潰UI锛夛紝鍏朵腑杩樼敤鍒颁簡鍙抽敭寮瑰嚭鑿滃崟绛夊姛鑳姐€備釜浜鸿寰楄繖涓疄鐜拌繕涓嶉敊锛屾墍浠ユ潵鍒嗕韩涓€涓嬸煄併€俆ips锛氫釜浜烘瘮杈冨枩娆㈢敤鍥炬枃鏉ヨ瑙ｇ煡璇嗙偣銆傛瘮璧风洿鎺ヨ瑙ｆ蹇碉紝鎴戜釜浜烘洿鍠滄鐢ㄨ垂鏇煎涔犳硶鏉ヨ瑙ｆ煇涓姛鑳界殑瀹炵幇杩囩▼锛屽洜涓烘垜鏄彍楦熷垰鍏ラ棬銆傛潵鍒拌繖閲岋紝璁╂垜鏇村姞鏄庣櫧锛屾柊鎵嬪湪瀛︿範涓€闂ㄦ柊鐭ヨ瘑鐨勬椂鍊欙紝涓嶉渶瑕佷綘鍚戜粬瑙ｉ噴瀹炵幇鍘熺悊锛岃€屾槸闇€瑕佷綘鍋氫竴涓€滃悜瀵尖€濓紝璁╀粬绠€鍗曠殑鐭ラ亾杩欎簺鐭ヨ瘑鏈変粈涔堢敤鏄殑锛屼互鍚庨殢鐫€鑷繁涓€姝ユ鐨勬繁鍏ョ悊瑙ｏ紝鑷繁涔熶細鎱㈡參鏄庣櫧鍏朵腑鐨勫師鐞嗐€?.鍓嶆湡鍑嗗鎴戜滑闇€瑕佹竻妤氱殑璁よ瘑鍒拌繖绉嶇敤鎴风偣鍑诲彸閿脊鍑鸿彍鍗曠殑鍔ㄤ綔琛屼负鏄潪甯镐笉閫傚悎鍦ㄩ〉闈笂鍐欑粍浠剁殑锛岀劧鍚庣敤v-show鎴栬€卾-if鏉ユ帶鍒跺畠鐨勫嚭鐜板拰娑堝け锛屾垜浠渶瑕佹兂鍔炴硶鐢ㄥ嚱鏁版潵鎺у埗瀹冪殑琛屼负銆傚湪姝や箣鍓嶏紝浣犻渶瑕佸噯澶囦袱涓枃浠舵潵璺熸垜涓€璧峰疄鐜拌繖涓彸閿彍鍗曘€傞瑙堝浘锛?.鍙抽敭鑿滃崟鐨勬牱寮忚彍鍗曟牱寮忕殑鍐欐硶涓嶆槸鎴戜滑鏈枃鐨勯噸鐐广€備綘鍙互鍦∕enu.vue涓揩閫熺紪鍐欎竴涓綘鍠滄鐨勭畝鍗昫iv銆傛垜浠殑閲嶇偣鏄浣曞彸閿脊鍑恒€備綘涔熷彲浠ョ洿鎺ュ鍒舵垜鍦ㄤ笅闈㈡簮鐮佷腑鍐欑殑鏍峰紡锛屼絾鏄渶瑕佷娇鐢║noCSS鏉ユ敮鎸佺害鏉熸牱寮忓睘鎬с€傚鏋滀綘涓嶇煡閬撳浣曚娇鐢║nocss锛屽彲浠ュ弬鑰冭繖绡囨枃绔犳暀浣犲浣曞疄鐜颁唬鐮佷粨搴撱€傞噷闈㈡湁璇︾粏鐨勬祦绋嬪府浣犲畬鎴愪唬鐮佷粨搴撶殑鎼缓锛屽寘鎷浣曞紩鍏ュ拰浣跨敤Unocss銆?3.h鍑芥暟鍜宺ender鍑芥暟鐨勪娇鐢ㄧ幇鍦ㄦ垜浠凡缁忓畬鎴愪簡Menu.vue鏂囦欢鐨勫唴瀹癸紝鎴戜滑闇€瑕佽浆杩囨潵灏嗗唴瀹瑰啓鍏ndex.ts涓€傚湪姝や箣鍓嶏紝鎴戜滑闇€瑕佸厛浠嬬粛涓€涓媣ue鏆撮湶缁欐垜浠殑涓や釜闈炲父閲嶈鐨勫姛鑳姐€俬锛岀劧鍚庢覆鏌撱€傚鏋滀綘涔嬪墠鐪嬭繃鎴戠殑鍙﹀涓夌瘒鏂囩珷锛岀浉淇′綘瀵硅繖涓や釜鍔熻兘鐨勪娇鐢ㄥ凡缁忓緢鐔熸倝浜嗭紝浣嗘槸涓轰簡鐓ч【涔嬪墠杩樹笉鐭ラ亾鐨勮鑰咃紝鎴戜細鍦ㄤ笅闈㈢殑鍐呭涓畝鍗曚粙缁嶄竴涓嬨€備笉杩囷紝鎴戣繕鏄缓璁ぇ瀹剁湅鐪嬩笅闈㈢殑瀹炵幇鏂规硶锛屼竴瀹氫細鏈変笉涓€鏍风殑鏀惰幏銆俈ue3濡備綍瀹炵幇涓€涓猅oast寮圭獥Vue3濡備綍瀹炵幇涓€涓叏灞€鎼滅储妗哣ue3濡備綍瀹炵幇涓€涓狣ialog鎺ヤ笅鏉ョ畝鍗曚粙缁嶄竴涓嬭繖涓や釜鍑芥暟鐨勪娇鐢ㄦ柟娉曘€備綘闇€瑕佺煡閬撲竴涓墠缃煡璇嗭紝鎴戜滑鍐欏湪妯℃澘鏍囩涓殑鏍峰紡锛屾渶缁堥兘浼氳浆鍖栦负铏氭嫙dom銆傝繖閲屽啓鐨刣iv鍏跺疄鍜屾垜浠湪娴忚鍣ㄤ腑鐪嬪埌鐨刣iv鏄€滀笉涓€鏍封€濈殑div锛屽彧鏄痸ue甯垜浠仛浜嗗鐞嗭紝璁╁畠浠湅璧锋潵涓€鏍枫€傛ā鏉挎槸濡備綍澶勭悊鐨勶紵鍏跺疄灏辨槸閫氳繃浜唄鍑芥暟銆傜劧鍚巋鍑芥暟浼氳繑鍥炰竴涓壒娈婄殑JS瀵硅薄锛屼篃灏辨槸鎴戜滑鎵€璇寸殑virtualdom銆傞偅涔堝湪杩欑鍦烘櫙涓嬫垜浠濡備綍浣跨敤鍛紵棣栧厛闇€瑕佸湪index.ts鏂囦欢涓鍏ユ垜浠垰鍒氱紪鍐欑殑鍙抽敭鑿滃崟鏍峰紡銆傜劧鍚庢妸杩欎釜缁勪欢浣滀负h鍑芥暟鐨勭涓€涓弬鏁帮紝娌￠敊锛屽氨杩欎箞绠€鍗曘€傝繖涓獀node灏辨槸鎴戜滑闇€瑕佷娇鐢ㄧ殑铏氭嫙dom銆傚厜鏈夎櫄鎷焏om杩樹笉澶燂紝鎴戜滑杩樺緱鍛婅瘔vue鎴戜滑瑕佹妸杩欎釜铏氭嫙dom娓叉煋鍒板摢閲屽幓锛岃繖鏃跺€欏氨闇€瑕佺敤鍒皉ender鍑芥暟銆俽ender鍑芥暟瑕佸仛鐨勪簨鎯呭氨姣旇緝澶嶆潅浜嗭紝杩欓噷浣犲彧闇€瑕佺畝鍗曚簡瑙ｄ竴涓嬪氨鍙互浜嗐€俽ender鍑芥暟灏嗚櫄鎷焏om杞崲涓虹湡瀹炵殑dom鑺傜偣銆傛棦鐒堕渶瑕佽櫄鎷焏om锛屾垜灏辩洿鎺ョ敤h鍑芥暟杞崲涓€涓嬪氨鎼炲畾浜嗭紝鑷劧灏卞彲浠ュ啓鍑轰笅闈㈢殑浠ｇ爜浜嗐€傚彂鐢熶簡浠€涔堬紵涓轰粈涔堣繕鏄姤閿欙紵鎴戜滑鏌ョ湅閿欒淇℃伅锛屽彂鐜皉ender鍑芥暟闇€瑕佷袱涓弬鏁帮紝鑰屾垜浠彧缁欎簡涓€涓€傞偅涔堢浜屼釜鍙傛暟鏄粈涔堬紵澶у鎯充竴鎯筹紝鐜板湪杩欎釜dom宸茬粡杞崲鎴愪簡涓€涓湡姝ｇ殑dom鑺傜偣锛屼絾鏄洰鍓嶅畠涓嶇煡閬撳簲璇ユ覆鏌撳埌鍝噷鍘伙紝杩欐剰鍛崇潃浠€涔堬紵鍏跺疄鐞嗚В璧锋潵涔熷緢绠€鍗曘€傚氨鍍忎綘鐜板湪鏄竴涓€佽揣鍛樸€傚綋浣犲幓椁愬巺鍙栭鏃讹紝椁愬巺宸ヤ綔浜哄憳璇翠綘鍘汇€備綘鎵嬮噷鎷跨潃涓€浠藉鍗栵紝闈㈡棤琛ㄦ儏銆傛垜搴旇鍘诲摢鍎匡紵鐩稿簲鐨勶紝vue甯綘澶勭悊浜嗚繖涓櫄鎷熻妭鐐癸紝浣嗘槸浣犳病鏈夊憡璇夊畠鍘诲摢閲屾覆鏌撱€傚師鍥犲緢绠€鍗曪紝鎴戜滑鐩存帴鍒涘缓涓€涓┖鐨刣iv锛屽厛璁﹔ender浣跨敤銆?銆佸彸閿脊鍑鸿彍鍗曠殑瀹炵幇鍦ㄦ墽琛屼笅闈㈢殑鍔熻兘涔嬪墠锛屼綘闇€瑕佷簡瑙ｄ竴涓墠缃煡璇嗐€傚涓婂浘gif鎵€绀猴紝鎴戜滑鍙互鐪嬪埌娴忚鍣ㄦ湰韬湁涓€涓粯璁ょ殑鍙抽敭鐐瑰嚮浜嬩欢銆傝繖閲屾垜浠渶瑕佸彇娑堟祻瑙堝櫒鑷甫鐨勫彸閿脊鍑鸿彍鍗曚簨浠躲€傝鐨勫叿浣撲竴鐐癸紝鍏跺疄鎴戜滑闇€瑕佸仛鐨勫氨鏄浛鎹㈡帀娴忚鍣ㄩ粯璁ょ殑鍙抽敭浜嬩欢銆傞€氳繃鏌ラ槄MDN锛屾垜浠彲浠ョ煡閬撳湪window瀵硅薄涓湁涓€涓彨鍋歝ontextMenus鐨勪簨浠躲€傞偅涔堜笅涓€姝ュ氨绠€鍗曚簡锛屾垜浠彲浠ョ洿鎺ュ皢杩欎釜浜嬩欢鏇挎崲鎴愭垜浠嚜瀹氫箟鐨勪簨浠躲€傦紙杩欓噷闇€瑕佽皟鐢╡.preventDefault鏂规硶鏉ラ樆姝efault浜嬩欢锛夌劧鍚庢垜浠湪浠绘剰涓€涓叏灞忕粍浠朵腑寮曞叆杩欎釜鍑芥暟锛屾垜浠祴璇曚竴涓嬬湅鐪嬫晥鏋滃ソ浜嗭紝鐜板湪娴忚鍣ㄧ殑榛樿鑿滃崟涓嶄細寮瑰嚭浜?閭ｄ箞鎺ヤ笅鏉ヨ鍋氱殑灏辨槸濡備綍璁╂垜浠啓鐨勮彍鍗曞嚭鐜板湪椤甸潰涓娿€傞鍏堬紝鎴戜滑闇€瑕佹槑纭湴鍛婅瘔杩欎釜缁勪欢浣犵殑鐖跺厓绱犳槸璋併€備笂闈㈡垜浠彧鏄复鏃跺垱寤轰簡涓€涓畝鍗曠殑div锛屼絾鏄垜浠繕娌℃湁鍛婅瘔瀹冨簲璇ユ覆鏌撳湪鍝噷銆傚鐞嗘柟娉曚篃寰堢畝鍗曘€傝繖閲屾垜鎻愬墠鍒涘缓浜嗕竴涓潪甯哥畝鍗曠殑椤甸潰锛屽苟璁剧疆浜嗕竴涓敮涓€鐨処D銆傞偅涔堟垜浠氨鍙互寰堝鏄撶殑寰楀埌杩欎釜鍏冪礌銆傜幇鍦ㄧ埗鍏冪礌宸茬粡瀛樺湪锛屾垜浠彧闇€瑕佸皢鎴戜滑鐨刢ontainerEl鍏冪礌鏀惧叆浣滅敤鍩熶腑銆備絾鏄綘闇€瑕佺煡閬撶殑鏄紝鎴戜滑鐨勫厓绱犱笉搴旇鍑虹幇鍦ㄦ甯哥殑鏂囨。娴佷腑锛屽洜涓哄畠鐨勪綅缃槸涓嶅浐瀹氱殑锛屾墍浠ユ垜浠簲璇ユ妸瀹冨綋鍋氫竴涓粷瀵瑰畾浣嶇被鍨嬬殑鍏冪礌锛岀劧鍚庡啀鏀惧叆浣滅敤鍩熷厓绱犱腑銆傚浜嗭紝杩欓噷闇€瑕佹敞鎰忎竴涓嬶紝鎴戜滑闇€瑕佺粰scope璁剧疆涓€涓猺elative灞炴€э紝鍛婅瘔鎴戜滑鐨刢ontainerEl搴旇缁濆瀹氫綅鍦ㄥ摢涓猻cope涓€傛帴涓嬫潵锛屾垜浠繘鍏ユ垜浠殑浣滅敤鍩熺粍浠讹紝寮曞叆杩欎釜鍑芥暟锛岃皟鐢ㄥ畠鐪嬬湅鏁堟灉銆傚ソ浜嗭紝鑷虫鎴戜滑鐨勫彸閿脊鍑鸿彍鍗曠殑鍩烘湰鍔熻兘宸茬粡瀹炵幇浜嗐€?.鑿滃崟鍑虹幇鐨勪綅缃繖閲屾垜浠渶瑕佺敤鍒癱lientX鍜宑lientY灞炴€с€傚鏋滄偍鏄涓€娆＄湅鍒拌繖涓ゼ鐩橈紝閭ｄ箞璁╂垜绠€鍗曚粙缁嶄竴涓嬨€傚亣璁炬垜鐐瑰嚮灞忓箷锛堢被姣斾笂鍥句腑鐨勭孩鐐癸級锛岄偅涔堣繖涓偣鍒板睆骞曟渶宸﹁竟鐨勮窛绂诲氨鏄痗lientX锛屽埌灞忓箷椤堕儴鐨勮窛绂诲氨鏄痗lientY銆備綘涓€瀹氭兂寰楀緢宸у锛岄偅鎴戞妸containerEl鐨則op鍜宭eft鐨勫€煎垎鍒缃负杩欎袱涓睘鎬х殑鍊硷紝涓嶅氨璁╄彍鍗曞嚭鐜板湪鎴戜滑鍙宠竟浜嗗悧锛熻鎴戜滑璇曡瘯鍚с€傜劧鍚庣湅鐪嬫晥鏋滐細鍒扮洰鍓嶄负姝竴鍒囨甯革紝浣嗘垜浠渶瑕佽€冭檻杈圭晫鎯呭喌銆傚綋鎴戜滑绂诲睆骞曞彸渚уお杩戞椂锛屽彸鍑讳細瀵艰嚧閮ㄥ垎鍐呭琚伄鎸°€傛墍浠ユ垜浠繀椤绘壘鍒颁竴绉嶆柟娉曟潵瑙ｅ喅杩欑杈圭紭鎯呭喌銆?銆佷笉瑕佽涓哄お闈犺繎鍙宠竟鐨勯棶棰樺緢闅捐В鍐炽€傚叾瀹炴垜浠幇鍦ㄨ鍋氱殑寰堢畝鍗曘€傚涓婂浘锛屾垜浠彧闇€瑕佸垽鏂璼cope鐨刢lientWidth鐨勯暱搴︹€斺€攃lientX鐨勯暱搴?鏄惁澶т簬containerEl鐨刼ffsetWidth锛熷鏋滄瘮杈冨ぇ锛屽氨鎶婁粠宸﹀埌鍙崇殑鏂瑰悜杞繃鏉ワ紝璁剧疆right=0px銆傚鏋滀綘涓嶇悊瑙ｄ笂闈㈡彁鍒扮殑offsetWidth鍜宑lientWidth銆傚己鐑堝缓璁ぇ瀹剁偣寮€杩欑瘒鍗氭枃浜嗚В涓€涓嬭繖浜泈idth灞炴€ф槸浠€涔堟剰鎬濓紝鍥犱负瀵逛簬鍓嶇寮€鍙戞潵璇达紝杩欎簺閮芥槸鏋佸叾閲嶈鐨勫睘鎬с€傚鏋滀綘浠ュ悗鎯虫帴瑙︾Щ鍔ㄧ锛岄偅涔堣繖灏辨槸浣犲繀椤绘帉鎻＄殑鐭ヨ瘑鐐广€俢lientWdith,scrollWidth,offsetWidth浣犺偗瀹氱煡閬撶煡閬撳師鐞嗕簡锛屽啓浠ｇ爜灏卞緢绠€鍗曚簡銆傚湪姝や箣鍓嶏紝鎴戜滑闇€瑕佸湪杩欓噷璋冩暣scope.appendChild鐨勬墽琛屾椂鏈恒€傝鎴戜滑娴嬭瘯涓€涓嬨€?.澧炲己璇ュ姛鑳界殑鍋ュ．鎬с€傜洰鍓嶆垜浠棤娉曚繚璇佽繖涓洅瀛愮殑鍞竴鎬э紝鎵€浠ヨ繕鏄渶瑕佷慨鏀硅繖涓嚱鏁般€傛坊鍔犱竴涓彉閲廼sShow锛屾垜浠渶瑕佺煡閬撳綋鍓峂enu鑿滃崟鏄惁姝ｅ湪鏄剧ず銆傚皢containerEl浠巆onst澹版槑鏇存敼涓簂et澹版槑銆傚苟灏嗗垱寤烘椂闂村欢杩熷埌璋冪敤鍙抽敭鏃讹紝杩欐牱鎴戜滑灏卞彲浠ヤ繚璇佹瘡娆″彸閿垱寤虹殑Menu缁勪欢閮芥槸鍏ㄦ柊鐨勩€傦紙鍚﹀垯浼氬嚭鐜扮户缁娇鐢ㄤ笂涓€涓猚ss灞炴€х殑bug锛屽鑷存牱寮忎贡搴忋€傦級鑾峰彇scope鍏冪礌鐨勬椂鏈轰篃琚帹杩熷埌鐢ㄦ埛鐐瑰嚮鍙抽敭鐨勬椂鍊欍€傦紙鍥犱负鍚庨潰鐨刢lose鍑芥暟涔熼渶瑕佺敤鍒拌繖涓彉閲忥級鎷嗗垎涓や釜鍑芥暟锛屼竴涓墦寮€openMenu鍑芥暟锛屼竴涓叧闂璫loseMenu鍑芥暟銆傛渶鍚庡湪window.oncontextmenu鐨勫尶鍚嶅嚱鏁颁腑璋冪敤杩欎袱涓嚱鏁般€傜劧鍚庢垜浠叕寮€杩欎笁涓彉閲忋€?銆佸浣曚娇鐢ㄥ彸閿彍鍗曟垜浠繘鍏cope鐨?vue缁勪欢骞跺鍏ャ€傝繖鏍凤紝鎴戜滑鏃㈠彲浠ラ€氳繃鍙抽敭鍒涘缓杩欎釜鑿滃崟鏍忥紝鍙堝彲浠ュ湪鍚堥€傜殑鏃跺€欒繘琛屼竴浜涢€昏緫鍒ゆ柇锛屾墜鍔ㄦ墦寮€銆傛晥鏋滃涓婱enu.vue婧愮爜銆?scriptlang="ts"setup>import{ref}from"vue"constmenuItemsGroup=[{name:"View(V)",arrow:true,action:()=>{console.log("View")},},{name:"鎺掑簭(O)",arrow:false,action:()=>{console.log("Refresh")},},{name:"Refresh(E)",arrow:false,鍔ㄤ綔:()=>{console.log("Refresh")},},{name:"Paste(P)",arrow:false,action:()=>{console.log("Refresh")},},{name:"绮樿创蹇嵎鏂瑰紡(S)",arrow:false,action:()=>{console.log("Refresh")},},{name:"New(W)",arrow:false,鍔ㄤ綔:()=>{console.log("Refresh")},},{name:"Personalization(R)",arrow:false,action:()=>{console.log("Refresh")},},]
