涓€銆佹枃浠跺噯澶囧墠鏈熼渶瑕佸噯澶囦笁涓枃浠舵潵瀹屾垚鍏ㄥ眬鎼滅储妗哠earchBar.ts鏂囦欢SearchBar.vue鏂囦欢useSearch.ts鏂囦欢浜屻€佹悳绱㈢殑鏍峰紡box涓嶅湪鏈枃涓噸鐐规槸锛屾偍鍙互鑺变簲鍒嗛挓鍦⊿earchBar.vue鏂囦欢涓粯鍒朵竴涓寘瑁瑰湪input鏍囩涓殑闈炲父绠€鍗曠殑鏂瑰舰div锛屼互蹇€熶簡瑙ｄ互涓嬪唴瀹广€備絾棣栧厛鎴戜滑闇€瑕佺悊娓呮€濊矾銆傝繖涓粍浠朵細鍑虹幇鍦ㄦ垜浠〉闈㈢殑椤堕儴锛屾墍浠ラ渶瑕佸湪缁勪欢鍐呴儴浣跨敤缁濆甯冨眬銆傝鎴戜滑鍘籗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瀹冨憟鐜板湪椤甸潰涓婏紝浣嗘垜浠粛鐒朵笉鐭ラ亾濡備綍璁╁畠娑堝け銆傚叾瀹炲緢绠€鍗曘€傛垜浠彧闇€瑕侀€傛椂绉婚櫎dom鍏冪礌鍗冲彲銆傝繖閲屾垜浠渶瑕佺煡閬撲竴浠朵簨锛屾垜浠渶瑕佸皢searchBar鎻愬崌鍒板綋鍓嶆枃浠剁殑global锛岃€屼笉浠呬粎鏄痭ewinopen銆傚ソ浜嗭紝涓嬮潰鎴戜滑鏉ユ祴璇曚竴涓嬪浘鐗囦笂浼犳祦绋嬧€︹€?.浼樺寲SearchBarCreator鏋勯€犲嚱鏁扮殑浠ｇ爜閫昏緫鍐欏埌杩欓噷鐨勬椂鍊欙紝浣犲彲鑳戒細鍙戠幇涓€涓皬闂銆傚綋鎴戜竴鐩存寜鎼滅储鎸夐挳鏃讹紝瀹冧細鍑虹幇澶氫釜鎼滅储妗嗭紝浣嗘垜浠兂瑕佺殑鏄叏灞€鍙兘鏈変竴涓悳绱㈡銆傛崲涓搴︽兂锛屽氨鏄湪鍚屼竴鏃堕棿锛屽彧鑳藉嚭鐜版垜浠垱寤虹殑SeachBar鐨勪竴涓疄渚嬨€傛兂鎯仇煠旓紝鎴戝姞涓€涓彉閲忥紝isShowing鏄惁姝ｅ湪鏄剧ず锛屽鏋滄鍦ㄦ樉绀猴紝閭ｄ箞褰撶敤鎴峰啀娆¤皟鐢╬resent鏃讹紝鎴戜細璋冪敤瀹炰緥鏈韩鐨刣ismiss鏂规硶璁╁畠娑堝け锛屾槸鍚﹀彲琛岋紵5.缂栧啓涓€涓叏灞€鍞竴鐨勮皟鐢ㄥ疄渚嬪湪涓婇潰鐨勪緥瀛愪腑锛屾垜浠凡缁忓彲浠ュ湪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鍜宬鏃舵墦鍗板畠銆?.娣诲姞鍑虹幇鐨勫姩鐢汇€傛濡傛垜浠湪涓婇潰鐪嬪埌鐨勯偅鏍凤紝杩欐牱绐佺劧鐨勫嚭鐜版樉寰楁湁浜涚獊鍏€銆傛垜甯屾湜鍦ㄥ嚭鐜版悳绱㈡鐨勬椂鍊欙紝鑳芥湁杞诲井鐨勭炕璇戞晥鏋滐紝锛堢被浼间笅闈㈢殑鏁堟灉锛夋€庝箞鍋氬埌鐨勶紵杩欓噷鎴戜粙缁嶄竴涓瘮杈冪畝鍗曠殑鎬濊矾銆傛垜浠湪App.vue鏂囦欢鐨勬牱寮忎腑棰勮浜嗕竴涓狢ss鍔ㄧ敾锛屽苟缁欏畠鍙栦簡涓€涓ソ鍚殑鍚嶅瓧銆傚皢鍏剁О涓衡€渟earchInput鈥濆苟杩斿洖鍒版垜浠殑searBar.vue缁勪欢锛屼负璇ョ粍浠剁殑鏈€澶栧眰璧蜂竴涓ソ鍚殑鍚嶇О锛屾垜鍦ㄨ繖閲屽皢鍏剁О涓簊earchBarWrapper銆傜劧鍚庡洖鍒版垜浠殑SearchBar.ts鏂囦欢锛岃繖鏄垜浠斁缃甋eachBarCreator鏋勯€犲嚱鏁扮殑鍦版柟銆?tips:涓嶆槸useSearch.ts)杩欓噷鍏堣В閲婁竴涓嬫€濊矾銆傝皟鐢╮ender鍑芥暟鍚庯紝杩欎釜缁勪欢瀹為檯涓婂凡缁忔覆鏌撴垚浜嗕竴涓湡姝ｇ殑dom鍏冪礌锛屽彧鏄垜浠繕娌℃湁涓哄畠鎸囧畾娓叉煋浣嶇疆銆傛棦鐒舵槸鐪熸鐨刣om锛岄偅涔堟垜浠氨鍙互閫氳繃document.getElementById鏂规硶鑾峰彇鍒癝earchBar.vue缁勪欢锛坬uerySelector涔熸槸涓€鏍风殑锛屼竴涓剰鎬濓級锛岀劧鍚庢垜鍙鍦ㄨ皟鐢╠ocument.body.insertBefore鏂规硶涔嬪墠娣诲姞鍗冲彲鍒氭墠鎴戜滑鍦ˋpp.vue涓璁剧殑绫诲悕锛宻earchInput锛屽畬缇庣殑瀹炵幇浜嗘垜浠兂瑕佺殑鏁堟灉銆傛敞鎰忥細style锛岃繖鐐瑰彧鏄竴涓被鍚嶉€夋嫨鍣紝涓嶈蹇樹簡鍩虹銆?.鑷姩瀵圭劍鍦ㄥ脊鍑烘鐨勮緭鍏ユ瀹炵幇鑷姩瀵圭劍锛岀浉姣斿墠闈㈣鐨勯潪甯哥畝鍗曪紝杩欓噷涔熺畝鍗曟彁涓€涓嬨€傚湪nextTick涓皟鐢╥nput鏈韩鐨刦ocus鏂规硶鍗冲彲銆傛€荤粨锛氭垜涔嬫墍浠ヤ笉鍠滄鐢ㄧ湡瀹炰唬鐮佸啓鏂囩珷鑰屽ぇ閲忎娇鐢ㄦ埅鍥撅紝鏄洜涓烘垜鎼滅储鍒拌嚜宸辨兂瑕佺殑鏂囩珷鍚庯紝涔熷枩娆㈢湅鐪嬫湁娌℃湁鏈€缁堜骇鍝佷唬鐮侊紝鐒跺悗copy鐩存帴鎷挎潵鐢ㄨ繃锛屼絾寰€寰€蹇界暐浜嗚嚜宸卞姩鎵嬬湡姝ｇ悊瑙ｅ畠鐨勮繃绋嬨€?/p>
