鍓嶈█锛氳嚜浠庡涔爒ue浠ユ潵锛屼竴鐩村湪鎬濊€僾ue瀹樼綉鍏ㄥ眬鍛戒护+K璋冨嚭鐨勫叏灞€鍏抽敭瀛楁悳绱㈠姛鑳姐€傛濂芥渶杩戠殑椤圭洰涔熼渶瑕佸疄鐜颁竴涓叏灞€鎼滅储鐨勫姛鑳斤紝姝ｅソ鍙互鍏钩鐨勬嬁钖按瀛︿範涓€涓嬭繖涓姛鑳界殑鎬濊矾銆傜綉涓婄殑鏁欑▼姘村钩鍙傚樊涓嶉綈锛屾伆濂芥垜鍦ㄤ箣鍓嶇殑椤圭洰涓仛杩囩被浼煎叏灞€寮瑰嚭闈㈠寘灞戠殑鍔熻兘锛屼簬鏄被姣斿啓浜嗕竴涓垜浠」鐩渶瑕佺殑鍏ㄥ眬鎼滅储妗嗭紝鎯冲垎浜垜鐨勬兂娉曘€傛敞鎰忥細鏈枃涓嶄細鏁欎綘濡備綍绔嬪嵆缂栧啓浠ｇ爜锛岃€屾槸浣滀负涓€涓寚鍗楋紝閫愭寮曞浣犵悊瑙ｆ暣涓€濊矾銆傛垜灏嗕粠鈥滃鏋滄垜鏄垵瀛﹁€咃紝濡傛灉鎴戝湪瀛︿範杩欎簺鐭ヨ瘑鐨勬椂鍊欏埆浜鸿兘杩欐牱鍛婅瘔鎴戯紝閭ｄ箞鎴戝氨鑳藉緢蹇悊瑙ｂ€濈殑瑙掑害鏉ヨВ閲娿€傛巿浜轰互楸间笉濡傛巿浜轰互娓斻€傚笇鏈涘ぇ瀹跺湪闃呰杩欑瘒鏂囩珷鐨勬椂鍊欙紝鑳藉鎷撳睍鎬濊矾锛屼妇涓€鍙嶄笁銆?.鏂囦欢鍑嗗鍓嶆湡闇€瑕佸噯澶囦笁涓枃浠舵潵瀹屾垚鍏ㄥ眬鎼滅储妗哠earchBar.ts鏂囦欢SearchBar.vue鏂囦欢useSearch.ts鏂囦欢2.鎼滅储妗嗙殑鏍峰紡涓嶆槸鏈枃鐨勯噸鐐癸紝浣犲彲浠ュ湪SearchBar涓婅姳浜斿垎閽熷湪.vue鏂囦欢涓敾鍑轰竴涓潪甯哥畝鍗曠殑姝ｆ柟褰iv骞跺寘瑁逛竴涓猧nput鏍囩鏉ュ揩閫熷涔犱互涓嬪唴瀹广€備絾棣栧厛鎴戜滑闇€瑕佺悊娓呮€濊矾銆傝繖涓粍浠朵細鍑虹幇鍦ㄦ垜浠〉闈㈢殑椤堕儴锛屾墍浠ラ渶瑕佸湪缁勪欢鍐呴儴浣跨敤缁濆甯冨眬銆傝鎴戜滑鍘籗earchBar.vue涓烘渶澶栧眰鐨刣iv璁剧疆鏍峰紡銆傝繖閲岀殑鍏朵粬鏍峰紡浣跨敤UnoCSS銆傛病鐢ㄨ繃鐨勬湅鍙嬩笉鐢ㄦ媴蹇冦€傚彧鏄畝鍗曠殑椋庢牸锛屼笌鏈枃鍐呭鏃犲叧銆?锛坈ss鍐欐垚computedproperty鍦ㄨ繖涓満鏅病鏈変粈涔堢壒娈婃剰涔夛紝鍙槸绠€鍗曠殑璁捐鑰冭檻姣旇緝澶氾級3.娓叉煋鍑芥暟h鍜宺ender鍑芥暟锛堝叧閿偣锛夋墦寮€涔嬪墠鍑嗗濂界殑SearchBar.ts鏂囦欢锛屼粠涓鍏ヨ繖涓や釜鍑芥暟vue锛屽苟灏嗕笂涓€姝ョ紪鍐欑殑绠€鏄撶増鎼滅储妗嗭紙SearchBar.vue锛夊紩鍏ュ埌璇ユ枃浠朵腑銆傜湅杩囨垜涓婁竴绡囨枃绔燰ue3瀹炵幇涓€涓猅oast鐨勮鑰呭彲鑳芥瘮杈冪啛鎮夛紝浣嗘槸鍦ㄩ偅绡囨枃绔犱腑锛岀敱浜庢垜涔熸槸绗竴娆℃帴瑙﹁繖涓や釜鍔熻兘锛屾墍浠ュ綋鏃剁殑鎬荤粨涓嶆槸鐗瑰埆鍑嗙‘锛屾墍浠ラ噸鏂版暣鐞嗕簡涓€涓嬫垜鐨勬兂娉曘€傛垜鍦ㄨ繖閲屽啀瑙ｉ噴涓€涓嬨€傞鍏堟垜浠粠瀹樼綉鐨勪粙缁嶆潵鐪嬩竴涓嬭繖涓嚱鏁扮殑瀹氫箟銆傚彲浠ョ湅鍑鸿繖涓嚱鏁扮殑绗竴涓弬鏁版槸蹇呴』鐨勶紝鍙互鏄瓧绗︿覆涔熷彲浠ユ槸Component銆傛湰鏂囦富瑕侀拡瀵瑰弬鏁颁负Component鐨勬儏鍐点€傞噸鐐规槸杩欎釜鍑芥暟鐨勮繑鍥炲€兼槸涓€涓猇Node銆俈irtualNode杩欎釜澶у鑲畾涓嶉檶鐢熴€傜湅瀹岃繖绡囨枃绔犵殑璇昏€呭彲鑳藉铏氭嫙dom鐨勫師鐞嗕笉鏄偅涔堟竻妤氾紝浣嗘槸鐩镐俊浣犱竴瀹氱煡閬撳畠鐨勫熀鏈満鍒躲€俈ue瀹為檯涓婃槸鍏堟覆鏌撹櫄鎷焏om-->鐒跺悗灏嗗叾杞崲涓虹湡瀹炵殑dom銆備笉瑕佹€ヤ簬鍐欎唬鐮侊紝鎴戞兂浣犲彲鑳芥洿浜嗚В杩欑鍐欐硶锛屾瘮濡傛垜浠箣鍓嶅湪SearchBar.vue鏂囦欢涓啓鐨勭畝鍗曞脊鍑烘銆傛暣涓粍浠剁殑鏍峰紡鏄啓鍦╒ue鎻愪緵鐨?template>缁勪欢涓殑锛屼絾鏄鐭ラ亾Vue杩樻槸閫氳繃搴曞眰璋冪敤h()鏉ュ畬鎴愯櫄鎷焏om鐨勬瀯寤恒€傝€?template>鍙槸Vue鎻愪緵鐨勪竴涓娉曠硸馃崿锛岃浣犵敤鐔熸倝鐨勫師鐢焗tml杩涜寮€鍙戙€傦紙鍡紝浣犲彲浠ヨ繖涔堢悊瑙ｏ級閭ｄ箞鎴戜滑鍙互鏍规嵁涓婇潰h()鍑芥暟鐨勪粙缁嶏紝瀹冩帴鏀剁殑绗竴涓弬鏁板彲浠ユ槸Component锛岄偅涔堟垜浠殑SearchBar.vue涓嶅氨鏄竴涓粍浠跺悧锛熼偅涔堝鏋滄垜涓嶆兂鐢?template>鏉ユ樉绀鸿繖涓粍浠讹紝鎴戝彲浠ヨ繖鏍峰啓鍚楋紵h(SearchBar.vue)銆傛槸鐨勶紝鏄殑锛屼綘鍙互杩欐牱鍐欍€傚埆蹇樹簡h鐨勮繑鍥炲€煎氨鏄垜浠鑾峰彇鐨刅node锛屾墍浠ユ纭殑鍐欐硶鏄繖鏍风殑銆?.缂栧啓SearchBarMaker鐨勬瀯閫犲嚱鏁板拰present鏂规硶璁╂垜浠洖鍒癝earchBar.ts鏂囦欢銆傞鍏堟兂涓€鎯筹紝杩欎釜鎼滅储妗嗕竴瀹氭湁涓€涓嚭鐜扮殑鍔熻兘鍜屼竴涓秷澶辩殑鍔熻兘馃锛宱k锛屽懡鍚嶏紝涓€鍛堢幇锛屼竴娑堝け銆傛帴涓嬫潵锛屾垜闇€瑕佸垱寤轰竴涓猇Node锛岀劧鍚庢兂鍔炴硶鎶婂畠澶勭悊鎴愪竴涓湡姝ｇ殑dom銆傜粡杩囦笂闈㈢殑瀛︿範锛岀涓€姝ラ┈涓婂氨鍙互鎯冲埌涓嬮潰鐨勫啓娉曘€備笅涓€涓洿閲嶉噺绾э紝render()鍑芥暟銆傛湁浜嗚櫄鎷焏om锛屽浣曞緱鍒扮湡瀹炵殑dom锛烿ue涓烘垜浠彁渚涗簡杩欐牱鐨勫姛鑳姐€傝繖閲岄渶瑕侀噸鐐圭湅鍒拌繖涓嚱鏁扮殑绫诲瀷鏄竴涓€硷紝鏄竴涓猂ootRenderFuncion绫诲瀷銆傝繖閲屾垜浠崲涓€濊矾銆傛垜浠湅render鍑芥暟鐨勭浜屼釜鍙傛暟鏄竴涓猚ontainer:HostElement锛岀劧鍚庢垜浠墦寮€鎴戜滑鐨刴ain.ts鏂囦欢銆傝鎴戜滑璺冲埌mount鐨勫畾涔夐儴鍒嗐€備綘鎵惧埌绁炲鐨勫湴鏂逛簡鍚楋紵铏界劧鎴戜滑涓嶇煡閬揌ostElement鏄粈涔堢被鍨嬶紝浣嗘槸浣犵煡閬撲綘鐨刴ount鍑芥暟閲岄潰濉殑鍙傛暟鏄粈涔堝悧锛燂紙蹇樿浜嗭紝杞ご鏈夋剰璇嗙殑鍘诲畼缃戝涔犱竴涓嬨€傦級娌￠敊锛屽氨鏄繖涓笘鐣屼笂鍞竴鐪熸鐨刣om锛屼竴涓彨app鐨刣iv鍏冪礌锛宨d鏈村疄鏃犲崕銆傞檺浜庣瘒骞咃紝杩欓噷鍙互绠€鍗曠悊瑙ender鍑芥暟浼氬皢浣犵殑铏氭嫙dom鍖呰９鎴愪竴涓湡瀹炵殑dom鍏冪礌锛屼絾鏄綘闇€瑕佺粰瀹冧竴涓湡瀹炵殑shelldom锛屽憡璇夊畠鍦ㄥ摢閲屾覆鏌撹櫄鎷焏om銆俹k锛屽緱鍒颁竴涓寘瑁瑰ソ鐨勮櫄鎷焏om锛屼笅涓€姝ュ氨鏄憡璇夋祻瑙堝櫒鍦ㄥ摢閲屾覆鏌撹繖涓厓绱犮€傝繖閲屾垜浠渶瑕佹€濊€凁煠旓紝鏃㈢劧鍙互鍏ㄥ眬寮瑰嚭锛岄渶瑕佸湪鎵€鏈夌粍浠朵箣涓婂脊鍑恒€傞偅涔堟渶绠€鍗曠殑鏂规硶灏辨槸璁╁畠鍑虹幇鍦╞ody鐨勭涓€涓厓绱犱腑锛岄偅涔堝畠涓€瀹氳鍜屾垜浠綉椤电殑鎵€鏈夌粍浠跺浜庡悓涓€灞傜骇锛坱ips锛氶€氬父鎴戜滑鎵€鏈夌殑椤甸潰缁勪欢閮戒細鍐欏湪body涓殑涓€涓猟iv涓€備粈涔堬紵浣犻棶鎴戜负浠€涔堬紵璇锋墦寮€浣犵殑index.html鐪嬬湅锛屼綘蹇樹簡鎴戜滑鐨凙pp.vue鏄寕鍦ㄨ繖涓猧d涓篴pp鐨勭湡瀹炲厓绱犱腑鐨勶級閭ｄ箞鎴戜滑鐨勬搷浣滄€濊矾寰堢畝鍗曪紝褰撴垜鎸変笅鍏ㄥ眬鎼滅储鎸夐挳锛岀劧鍚庝綘鍙互鍦?divid="app">鍏冪礌涔嬪墠鎻掑叆鎴戠殑缁勪欢銆傚ソ浜嗭紝鍒拌繖閲屾垜浠凡缁忓彲浠ョ湅鍒板熀鏈殑鏁堟灉浜嗭紝鎴戜滑鏉ユ祴璇曚竴涓嬨€傝鎴戜滑鍦ˋpp.vue缁勪欢涓紪鍐欎竴涓殢鏈烘寜閽紝骞跺湪SearchBarCreator瀹炰緥涓婅皟鐢╬resent鏂规硶銆傦紙maker瑙夊緱涓嶅悎鐞嗭紝鍚庢潵鎴戜滑鎶婂悕瀛椾粠SearchBarMaker鏀规垚浜哠eachBarCreator锛屽彧鏄悕瀛楀彉浜嗭紝閫昏緫涓€鐐归兘娌″彉銆傪煃︼級鏁堟灉濡備笅锛氳繖閲屽凡缁忓彲浠ュ湪椤甸潰鏄剧ずsearchBar浜嗭紝浣嗘槸鎴戜滑涓嶇煡閬撴€庝箞璁╁畠娑堝け锛屽叾瀹炲緢绠€鍗曪紝鎴戜滑鍙渶瑕佸湪鍚堥€傜殑鏃跺€欑Щ闄om鍏冪礌鍗冲彲銆傝繖閲屾垜浠渶瑕佺煡閬撲竴浠朵簨锛屾垜浠渶瑕佸皢searchBar鎻愬崌鍒板綋鍓嶆枃浠剁殑global锛岃€屼笉浠呬粎鏄痭ewinopen銆傚ソ锛屾垜浠潵娴嬭瘯涓€涓?.浼樺寲SearchBarCreator鏋勯€犲嚱鏁扮殑浠ｇ爜閫昏緫銆傚啓鍒拌繖閲岋紝浣犲彲鑳戒細鍙戠幇涓€涓皬闂銆傚綋鎴戜竴鐩存寜鎼滅储鎸夐挳鐨勬椂鍊欙紝浼氬嚭鐜板涓悳绱㈡锛屼絾鏄垜浠兂瑕佺殑鏄彧鏈変竴涓悳绱㈡鍙互鍏ㄥ眬鍑虹幇銆傛崲涓搴︽兂锛屽氨鏄湪鍚屼竴鏃堕棿锛屽彧鑳藉嚭鐜版垜浠垱寤虹殑SeachBar鐨勪竴涓疄渚嬨€傛兂鎯仇煠旓紝鎴戝姞涓€涓彉閲忥紝isShowing鏄惁姝ｅ湪鏄剧ず锛屽鏋滄鍦ㄦ樉绀猴紝閭ｄ箞褰撶敤鎴峰啀娆¤皟鐢╬resent鏃讹紝鎴戜細璋冪敤瀹炰緥鏈韩鐨刣ismiss鏂规硶璁╁畠娑堝け锛屾槸鍚﹀彲琛岋紵娴嬭瘯涓€涓嬶細OK锛岀湅鏉ョ洰鍓嶇殑闂宸茬粡瀹岀編瑙ｅ喅浜嗐€?.缂栧啓涓€涓叏灞€鍞竴鐨勮皟鐢ㄥ疄渚嬪湪涓婇潰鐨勪緥瀛愪腑锛屾垜浠凡缁忓彲浠ュ湪App.vue鏂囦欢涓柊寤轰竴涓疄渚嬫潵璋冪敤鎼滅储妗嗕簡銆備絾鏄垜浠幇鍦ㄩ渶瑕佸湪XXX.vue鏂囦欢涓粰杩欎釜鎼滅储妗嗚捣浠€涔堝悕瀛楀憿锛熻繕闇€瑕侀噸鏂颁粙缁嶏紝鐒跺悗閲嶆柊new鍚楋紵nonono锛屽ぇ浣绋嬪簭鍛樺緢鎳掓儼锛屼笉鍙兘鍐欏嚭杩欎箞浣庣骇閲嶅鐨勪唬鐮併€傞偅涔堝浣曞疄鐜板憿锛熸墦寮€鎴戜滑涔嬪墠鍑嗗鐨剈seSearch.ts鏂囦欢锛屾垜浠皢App.vue涓叏灞€鐢熸垚鐨凷earchBar瀹炰緥杞崲鎴愪竴涓叏灞€鐨則s鏂囦欢锛岀劧鍚庢妸鍏朵腑鐨勪竴浜涙柟娉曞皝瑁呮垚鍑芥暟瀵瑰鏆撮湶銆傜劧鍚庢垜鍙互鍦ㄤ笘鐣屼换浣曞湴鏂圭殑杩欎釜瀹炰緥涓婅皟鐢ㄨ繖涓や釜鏂规硶銆傝鎴戜滑鍦ˋpp.vue涓皾璇曚竴涓嬨€傝繖鏄垜浠箣鍓岮pp.vue鏂囦欢鐨勮皟鐢ㄦ柟娉曘€傝鎴戜滑鏀归€犲畠銆傛垜浠啀娴嬭瘯涓€涓嬪嚱鏁版槸鍚︽湁闂銆傝繖鏍蜂細鏂逛究寰堝銆傛垜浠彲浠ュ湪浠讳綍鍦版柟灏嗘绉颁负鈥滃敮涓€鎼滅储妗嗏€濄€?.娣诲姞鍏ㄥ眬蹇嵎閿瓹ommand+K鍦ㄦ涔嬪墠锛屾垜浠渶瑕佷簡瑙ｄ竴涓蹇碉紝娉ㄦ剰鎴戜滑鐨刴ain.ts鏂囦欢锛屾垜浠湪鏁翠釜涓栫晫id='app'鐨勭湡瀹瀌om涓嬫寕浜嗚皝锛熸病閿欙紝灏辨槸鎴戜滑鍓嶉潰鎻愬埌鐨凙pp.vue缁勪欢銆傞偅涔堝鏋滄垜鍦ˋpp.vue缁勪欢鎸傝浇鐨勬椂鍊欑粰鍏ㄥ眬鐨剋indow瀵硅薄鍔犱笂涓€涓敭鐩樹簨浠讹紝鏄笉鏄氨鍙互浜嗗憿锛熷浣曟坊鍔狅紵浜嬪疄涓婏紝瀹冮潪甯搁潪甯哥畝鍗曘€傝浣跨敤缁勫悎閿紝鎴戜滑闇€瑕佷娇鐢ㄢ€渒eydown鈥濄€傚叿浣撲负浠€涔堜笉鏄€渒eypress鈥濓紝璇昏€呭彲浠ユ煡鐪嬩袱鑰呯殑鍖哄埆锛岃繖涓嶆槸鏈枃涓昏璁ㄨ鐨勫唴瀹广€傝繖涓椂鍊欐垜浠厛鐐筩ommand鐪嬬湅鎵撳嵃鍑烘潵鐨勬槸浠€涔堛€傝繖閲岀殑鍏抽敭鍐呭鏄敭鐩樹簨浠朵笂鐨刴etaKey灞炴€с€傝繖閲屾垜浠篃鍙互鎺ㄦ柇鎸変笅鈥渃trl鈥濈殑浜嬩欢鏄竴涓敮鎸佸涓寜閿悓鏃舵寜涓嬬殑keydown浜嬩欢銆傚綋鎴戜滑鍚屾椂鎸変笅鈥滃懡浠も€濆拰鈥淜鈥濋敭鏃朵細鍙戠敓浠€涔堬紵浣嗘槸鎴戜滑鍙戠幇濂藉儚娌℃湁K:true杩欎釜灞炴€э紝閭ｆ垜浠€庝箞鍒ゆ柇鍛紵鍒媴蹇冿紝缁х画璇讳笅鍘汇€傛垜浠彲浠ョ湅鍒伴敭鐩樹簨浠朵簨浠朵笂鏈変竴涓猭ey灞炴€э紝瀹冪殑鍊兼濂芥槸瀛楃涓茬被鍨嬬殑鈥渒鈥濄€傝繖閲屾垜鐩存帴鍏竷鍐欐硶銆俲s鍙互璁╂垜浠垽鏂袱涓寜閽槸鍚﹀悓鏃舵寜涓嬨€傝鎴戜滑娴嬭瘯涓€涓嬶紝璁╂垜浠幓鍒犻櫎App.vue鏂囦欢涓殑杩欎袱涓寜閽紝鐒跺悗鍦ㄦ垜浠寜涓媍ommand鍜宬鏃舵墦鍗板畠銆?/p>
