1銆傚墠瑷€鎴戜滑杩欓噷娌℃湁涓撹亴鐨勪骇鍝佺粡鐞嗭紝UI鍩烘湰涓婃湁鍐冲畾浜у搧璁捐鐨勬潈鍒┿€傝瀹炶瘽鏈夌偣鍚撲汉锛堝墠鍚庢敼浜嗗緢澶氭锛屽樊鐐规敼鍥炲師鏉ョ殑鐗堟湰锛岃嚜宸遍兘瑙夊緱灏村艾馃ぃ锛夈€傪煠旀湁娌℃湁涓€绉嶅彲鑳斤細鎴戜滑鏈塙I浣撻獙鐨勪骇鍝佸緢灏戯紝缂轰箯瀵逛骇鍝佸拰鐢ㄦ埛琛屼负鐨勭悊瑙ｃ€傝璁″嚭鏉ョ殑涓滆タ鐪嬩技鍗庝附锛屽叾瀹炲緢澶氬満鏅兘缂轰箯鍒嗘瀽锛屼笉瀹炵敤銆傝繖鏄骇鍝佺粡鐞嗛渶瑕佸仛鐨勫伐浣滀箣涓€銆傚ぇ澶氭暟浜鸿皥璁虹殑鈥滅敤鎴蜂綋楠屸€濆彲鑳藉彧鏄富瑙傜殑鍜屾兂褰撶劧鐨勶紙鎴戜篃鏄煒級銆傝嚜浠庢垜鎺ヨЕ浜嗕簰鑱旂綉锛屾垜灏变竴鐩村湪鏈夋剰鐨勫涔犲浣曞仛浜у搧銆傛湡闂翠篃鑰冭檻杩囨崲浜у搧銆傛案杩滀笉瑕佸皢涓氫綑鐖卞ソ鑰呬笌涓撲笟浜哄＋杩涜姣旇緝銆傛病鏈夋瘮杈冨拰涓嶆垚鐔熴€備笉鏂€濊€冨拰瀛︿範銆傝褰曚竴涓嬫垜瑙夊緱姣旇緝鏈夎叮鍜屽紩璧锋€濊€冪殑闇€姹傦紝浠ュ強浣跨敤鐨勬妧鏈細vue锛寁ue-router锛宔lement-ui銆?銆侀渶姹傦細灏嗗鑸彍鍗曪紙el-menu缁勪欢锛夊瀭鐩存樉绀虹殑榧犳爣绉诲姩鍒颁竴绾ц彍鍗曚腑鏄剧ず涓嬮潰鐨勫瓙鑿滃崟锛岀Щ鍑烘椂鍏抽棴锛堟墜椋庣惔妯″紡锛屽彧淇濈暀涓€涓彍鍗曞湪鍦ㄦ甯告潯浠朵笅鎵╁睍鐘舵€侊紝鎵嬪姩灏嗛紶鏍囨偓鍋滃湪閫夋嫨瀛愯彍鍗曟椂锛岃绐佸嚭鏄剧ず鐩稿簲鐨勭涓€绾ц彍鍗曪紝褰撻紶鏍囦粠绐佸嚭鏄剧ず鐨勮彍鍗曟ā鍧椾腑绉诲嚭鏃讹紝瀹冨皢涓嶄細鎶樺彔锛屼絾鏄偍鍙互鐐瑰嚮涓€绾ц彍鍗曟姌鍙狅紙娉ㄦ剰锛氫笌涓€绾т笉鍚岋級3銆侀棶棰橈細element-ui鐨勫鑸粍浠舵墦寮€瀛愯彍鍗曠殑瑙﹀彂鏂规硶鍙互閫氳繃menu-trigger鍙傛暟鎺у埗锛屼絾鏄粎鍦ㄨ彍鍗曟按骞虫樉绀烘椂鐢熸晥銆傚樁锝烇紒涓嶇鍦ㄦ兂馃锛氱珫灞忔粦鍔ㄥ睍寮€鐨勬椂鍊欑湡鐨勪細鏈夌郴缁熻繖涔堝共鍚楋紵锛堝彧鑳借嚜宸变慨鏀癸級unique-open鍙傛暟鍙互鎺у埗鏄惁鍙繚鐣欎竴涓瓙鑿滃崟灞曞紑锛屼絾鏄鏋滄病鏈夊瓙鑿滃崟灏变細澶辫触锛堥渶瑕佹墜鍔ㄤ慨鏀癸級4.鎬濊矾鍒嗘瀽锛氬鑸彍鍗曚娇鐢ㄩ€掑綊el-submenu缁勪欢瀹炵幇榧犳爣婊戝姩灞曞紑鍜屽叧闂渶姹傦細el-submenu缁勪欢鍐欏叆榧犳爣杩涘嚭浜嬩欢锛坢ouseenter銆乵ouseleave锛夛紝鑾峰彇indexPath锛岃皟鐢╫pen鍜宑lose鏂规硶鎵撳紑鎴栨敹璧疯彍鍗曪紙娉細榧犳爣娌℃湁瀛愯彍鍗曠殑涓€绾ц彍鍗曠Щ鍏ョЩ鍑轰笉澶勭悊锛夊彧淇濈暀涓€涓彍鍗曞浜庡睍寮€鐘舵€併€傞鍏堥厤缃畊nique-opened鍙傛暟涓篺alse锛屼繚璇佸彧鏈変竴涓猳penedMenus锛坥penedMenus鏄痚l-menu鍐呴儴缁存姢鐨勪竴涓睘鎬э紝鍙互鑷繁鎵撳嵃鐪嬬湅锛変竴寮€濮嬫垜鎯冲睍寮€鎶樺彔鍥炶皟浜嬩欢鍦ㄥ瓙鑿滃崟锛坥pen,close锛変腑鍐欓€昏緫鍒ゆ柇锛屼絾鏄笉鐭ラ亾涓轰粈涔堝洖璋冧簨浠朵笉瑙﹀彂锛堟敞锛歰pen鏂规硶涓嶅悓浜巓pen浜嬩欢锛岀粍浠剁殑涓夎绱狅細灞炴€э紝浜嬩欢锛屽拰鏂规硶锛夛紝鎵€浠ユ垜鑰冭檻select鍥炶皟浜嬩欢閫昏緫鍐欏湪鑿滃崟婵€娲荤殑select鍥炶皟浜嬩欢涓紝璁╂渶鍚庢墦寮€鐨勮彍鍗曡皟鐢╟lose鏂规硶鍏抽棴銆傦紙杩欓噷闇€瑕佽褰曟渶鍚庢墦寮€鐨勮彍鍗曠殑绱㈠紩锛岃繖閲屾垜浣跨敤sessionStorage鏉ヨ褰曘€傦級5銆佷唬鐮佸睍绀猴細鍙睍绀轰唬鐮佺墖娈碉紝浠呬緵鍙傝€冦€侫rticleel-submenucomponentmenuEnter(){//isNest鏄惁鏈夊瓙鑿滃崟true:娌℃湁瀛愯彍鍗昮alse:瀛愯彍鍗昳f(!this.isNest&&this.item.alwaysShow){//basePath:涓€绾ц彍鍗晅his.$emit('handleOpen',this.basePath)}}menuLeave(){//鏈夊瓙鑿滃崟锛屼笉鏄墦寮€鐨勮彍鍗曘€傞紶鏍囩寮€鏃堕渶瑕佸叧闂璱f(!this.isNest&&!this.curMenuIsOpened){//basePath:涓€绾ц彍鍗晅his.$emit('handleClose',this.basePath)}}el-menu缁勪欢//鐧诲綍绯荤粺鏃讹紝璁板綍灞曞紑鐨勮彍鍗曚俊鎭紝//鑾峰彇mounted涓殑openedMenus锛屽苟璁板綍淇℃伅mounted(){//鑾峰彇褰撳墠灞曞紑鐨勮彍鍗?鏁扮粍//鎵嬮鐞存ā寮忥紝鍙湁涓€涓睍寮€鐨勮彍鍗?/openedMenus鏄竴涓唴閮ㄥ睘鎬onst{openedMenus=[]}=this.$refs.menuRef;if(openedMenus&&openedMenus.length>0){//鑾峰彇灞曞紑鑿滃崟鐨勭储寮昪onstindex=openedMenus[0];sessionStorage.put('preActiveMenu',index)}}methods:{handleOpen(indexPath){//璋冪敤open鏂规硶锛宱penclose,this.$refs.menuRef.open(indexPath);}handleClose(indexPath){//璋冪敤close鏂规硶锛屽叧闂璫losethis.$refs.menuRef.close(indexPath);}handlerSelect(index,indexPath){//1.鑾峰彇鏈€鍚庢縺娲荤殑鑿滃崟淇℃伅const_preActiveMenu=sessionStorage.get('preActiveMenu')||'';if(_preActiveMenu){//濡傛灉瀛樺湪锛屽叧闂彍鍗曞苟鎵撳紑涓€涓柊鑿滃崟this.$refs.menuRef.close(_preActiveMenu);}//2.璁板綍鏈婵€娲荤殑鑿滃崟淇℃伅if(indexPath.length>0){sessionStorage.put('preActiveMenu',indexPath[0])}}}6.鏈€缁堟晥鏋滃睍绀猴細浣跨敤UI妗嗘灦鍚庯紝椤虹潃浜у搧璁捐椋庢牸寰€宸﹁蛋鏄繀鐒剁殑锛岄渶瑕佹牴鎹鏋朵慨鏀逛笂闈㈢殑妗嗘灦涔熸槸鐢辩粍浠剁粍鎴愮殑銆傛帉鎻＄粍浠惰璁＄殑涓夎绱狅細灞炴€с€佷簨浠躲€佹柟娉曪紝浜嗚В妗嗘灦缁勪欢鐨勫伐浣滃師鐞嗭紝灏卞彲浠ヨ交鏉句慨鏀广€傪煄夝煄夋垜鍠滄涓撴敾鍚勭涓庢垜鐨勫伐浣滃叧绯讳笉澶х殑鎶€鏈€傛垜瀵规妧鏈拰浜у搧鏈夌潃骞挎硾鑰屾祿鍘氱殑鍏磋叮锛屾鍦ㄧ瓑寰呭垱涓氱殑鏈轰細銆備富瑕佽嚧鍔涗簬鍒嗕韩瀹炵敤鐨勬妧鏈共璐э紝甯屾湜鑳界粰灏忛儴鍒嗕汉涓€浜涘皬灏忕殑甯姪銆傛垜鎷掔粷鈥滄柊浜虹湅鎴忥紝鏂颁汉鐪嬫垙鈥濈殑鐜拌薄锛屽笇鏈涘拰澶у涓€璧峰姫鍔涙墦鐮磋繖绉嶅眬闈€傝惀閫犺壇濂界殑鎶€鏈皼鍥达紝涓轰釜浜猴紝涓烘垜鍥界殑鏁板瓧鍖栬浆鍨嬶紝涓虹墿鑱旂綉鎶€鏈紝涓烘暟瀛楃粡娴庣殑鍙戝睍鍋氱偣璐＄尞銆傛暟椋庢祦浜虹墿杩樻槸鐪嬩腑鍥斤紝鐪嬪綋涓嬶紝鐪嬩綘鎴戙€?/p>
