当前位置: 首页 > Web前端 > HTML

Vue3如何实现一个全局搜索框_0

时间:2023-03-28 16:56:26 HTML

涓€銆佹枃浠跺噯澶囧墠鏈熼渶瑕佸噯澶囦笁涓枃浠舵潵瀹屾垚鍏ㄥ眬鎼滅储妗哠earchBar.ts鏂囦欢SearchBar.vue鏂囦欢useSearch.ts鏂囦欢浜屻€佹悳绱㈢殑鏍峰紡box涓嶅湪鏈枃涓噸鐐规槸锛屾偍鍙互鑺变簲鍒嗛挓鍦⊿earchBar.vue鏂囦欢涓粯鍒朵竴涓寘瑁瑰湪input鏍囩涓殑闈炲父绠€鍗曠殑鏂瑰舰div锛屼互蹇€熶簡瑙d互涓嬪唴瀹广€備絾棣栧厛鎴戜滑闇€瑕佺悊娓呮€濊矾銆傝繖涓粍浠朵細鍑虹幇鍦ㄦ垜浠〉闈㈢殑椤堕儴锛屾墍浠ラ渶瑕佸湪缁勪欢鍐呴儴浣跨敤缁濆甯冨眬銆傝鎴戜滑鍘籗earchBar.vue涓烘渶澶栧眰鐨刣iv璁剧疆鏍峰紡銆傝繖閲岀殑鍏朵粬鏍峰紡浣跨敤UnoCSS銆傛病鐢ㄨ繃鐨勬湅鍙嬩笉鐢ㄦ媴蹇冦€傚彧鏄畝鍗曠殑椋庢牸锛屼笌鏈枃鍐呭鏃犲叧銆?锛坈ss鍐欐垚computedproperty鍦ㄨ繖涓満鏅病鏈変粈涔堢壒娈婃剰涔夛紝鍙槸绠€鍗曠殑璁捐鑰冭檻姣旇緝澶氾級3.娓叉煋鍑芥暟h鍜宺ender鍑芥暟锛堝叧閿偣锛夋墦寮€涔嬪墠鍑嗗濂界殑SearchBar.ts鏂囦欢锛屼粠涓鍏ヨ繖涓や釜鍑芥暟vue锛屽苟灏嗕笂涓€姝ョ紪鍐欑殑绠€鏄撶増鎼滅储妗嗭紙SearchBar.vue锛夊紩鍏ュ埌璇ユ枃浠朵腑銆傜湅杩囨垜涓婁竴绡囨枃绔燰ue3瀹炵幇涓€涓猅oast鐨勮鑰呭彲鑳芥瘮杈冪啛鎮夛紝浣嗘槸鍦ㄩ偅绡囨枃绔犱腑锛岀敱浜庢垜涔熸槸绗竴娆℃帴瑙﹁繖涓や釜鍔熻兘锛屾墍浠ュ綋鏃剁殑鎬荤粨涓嶆槸鐗瑰埆鍑嗙‘锛屾墍浠ラ噸鏂版暣鐞嗕簡涓€涓嬫垜鐨勬兂娉曘€傛垜鍦ㄨ繖閲屽啀瑙i噴涓€涓嬨€傞鍏堟垜浠粠瀹樼綉鐨勪粙缁嶆潵鐪嬩竴涓嬭繖涓嚱鏁扮殑瀹氫箟銆傚彲浠ョ湅鍑鸿繖涓嚱鏁扮殑绗竴涓弬鏁版槸蹇呴』鐨勶紝鍙互鏄瓧绗︿覆涔熷彲浠ユ槸Component銆傛湰鏂囦富瑕侀拡瀵瑰弬鏁颁负Component鐨勬儏鍐点€傞噸鐐规槸杩欎釜鍑芥暟鐨勮繑鍥炲€兼槸涓€涓猇Node銆俈irtualNode杩欎釜澶у鑲畾涓嶉檶鐢熴€傜湅瀹岃繖绡囨枃绔犵殑璇昏€呭彲鑳藉铏氭嫙dom鐨勫師鐞嗕笉鏄偅涔堟竻妤氾紝浣嗘槸鐩镐俊浣犱竴瀹氱煡閬撳畠鐨勫熀鏈満鍒躲€俈ue瀹為檯涓婃槸鍏堟覆鏌撹櫄鎷焏om-->鐒跺悗灏嗗叾杞崲涓虹湡瀹炵殑dom銆備笉瑕佹€ヤ簬鍐欎唬鐮侊紝鎴戞兂浣犲彲鑳芥洿浜嗚В杩欑鍐欐硶锛屾瘮濡傛垜浠箣鍓嶅湪SearchBar.vue鏂囦欢涓啓鐨勭畝鍗曞脊鍑烘銆傛暣涓粍浠剁殑鏍峰紡鏄啓鍦╒ue鎻愪緵鐨?template>缁勪欢涓殑锛屼絾鏄鐭ラ亾Vue杩樻槸閫氳繃搴曞眰璋冪敤h()鏉ュ畬鎴愯櫄鎷焏om鐨勬瀯寤恒€傝€?template>鍙槸Vue鎻愪緵鐨勪竴涓娉曠硸馃崿锛岃浣犵敤鐔熸倝鐨勫師鐢焗tml杩涜寮€鍙戙€傦紙鍡紝浣犲彲浠ヨ繖涔堢悊瑙o級閭d箞鎴戜滑鍙互鏍规嵁涓婇潰h()鍑芥暟鐨勪粙缁嶏紝瀹冩帴鏀剁殑绗竴涓弬鏁板彲浠ユ槸Component锛岄偅涔堟垜浠殑SearchBar.vue涓嶅氨鏄竴涓粍浠跺悧锛熼偅涔堝鏋滄垜涓嶆兂鐢?template>鏉ユ樉绀鸿繖涓粍浠讹紝鎴戝彲浠ヨ繖鏍峰啓鍚楋紵h(SearchBar.vue)銆傛槸鐨勶紝鏄殑锛屼綘鍙互杩欐牱鍐欍€傚埆蹇樹簡h鐨勮繑鍥炲€煎氨鏄垜浠鑾峰彇鐨刅node锛屾墍浠ユ纭殑鍐欐硶鏄繖鏍风殑銆?.缂栧啓SearchBarMaker鐨勬瀯閫犲嚱鏁板拰present鏂规硶璁╂垜浠洖鍒癝earchBar.ts鏂囦欢銆傞鍏堟兂涓€鎯筹紝杩欎釜鎼滅储妗嗕竴瀹氭湁涓€涓嚭鐜扮殑鍔熻兘鍜屼竴涓秷澶辩殑鍔熻兘馃锛宱k锛屽懡鍚嶏紝涓€鍛堢幇锛屼竴娑堝け銆傛帴涓嬫潵锛屾垜闇€瑕佸垱寤轰竴涓猇Node锛岀劧鍚庢兂鍔炴硶鎶婂畠澶勭悊鎴愪竴涓湡姝g殑dom銆傜粡杩囦笂闈㈢殑瀛︿範锛岀涓€姝ラ┈涓婂氨鍙互鎯冲埌涓嬮潰鐨勫啓娉曘€備笅涓€涓洿閲嶉噺绾э紝render()鍑芥暟銆傛湁浜嗚櫄鎷焏om锛屽浣曞緱鍒扮湡瀹炵殑dom锛烿ue涓烘垜浠彁渚涗簡杩欐牱鐨勫姛鑳姐€傝繖閲岄渶瑕侀噸鐐圭湅鍒拌繖涓嚱鏁扮殑绫诲瀷鏄竴涓€硷紝鏄竴涓猂ootRenderFuncion绫诲瀷銆傝繖閲屾垜浠崲涓€濊矾銆傛垜浠湅render鍑芥暟鐨勭浜屼釜鍙傛暟鏄竴涓猚ontainer:HostElement锛岀劧鍚庢垜浠墦寮€鎴戜滑鐨刴ain.ts鏂囦欢銆傝鎴戜滑璺冲埌mount鐨勫畾涔夐儴鍒嗐€備綘鎵惧埌绁炲鐨勫湴鏂逛簡鍚楋紵铏界劧鎴戜滑涓嶇煡閬揌ostElement鏄粈涔堢被鍨嬶紝浣嗘槸浣犵煡閬撲綘鐨刴ount鍑芥暟閲岄潰濉殑鍙傛暟鏄粈涔堝悧锛燂紙蹇樿浜嗭紝杞ご鏈夋剰璇嗙殑鍘诲畼缃戝涔犱竴涓嬨€傦級娌¢敊锛屽氨鏄繖涓笘鐣屼笂鍞竴鐪熸鐨刣om锛屼竴涓彨app鐨刣iv鍏冪礌锛宨d鏈村疄鏃犲崕銆傞檺浜庣瘒骞咃紝杩欓噷鍙互绠€鍗曠悊瑙ender鍑芥暟浼氬皢浣犵殑铏氭嫙dom鍖呰9鎴愪竴涓湡瀹炵殑dom鍏冪礌锛屼絾鏄綘闇€瑕佺粰瀹冧竴涓湡瀹炵殑shelldom锛屽憡璇夊畠鍦ㄥ摢閲屾覆鏌撹櫄鎷焏om銆俹k锛屽緱鍒颁竴涓寘瑁瑰ソ鐨勮櫄鎷焏om锛屼笅涓€姝ュ氨鏄憡璇夋祻瑙堝櫒鍦ㄥ摢閲屾覆鏌撹繖涓厓绱犮€傝繖閲屾垜浠渶瑕佹€濊€凁煠旓紝鏃㈢劧鍙互鍏ㄥ眬寮瑰嚭锛岄渶瑕佸湪鎵€鏈夌粍浠朵箣涓婂脊鍑恒€傞偅涔堟渶绠€鍗曠殑鏂规硶灏辨槸璁╁畠鍑虹幇鍦╞ody鐨勭涓€涓厓绱犱腑锛岄偅涔堝畠涓€瀹氳鍜屾垜浠綉椤电殑鎵€鏈夌粍浠跺浜庡悓涓€灞傜骇锛坱ips锛氶€氬父鎴戜滑鎵€鏈夌殑椤甸潰缁勪欢閮戒細鍐欏湪body涓殑涓€涓猟iv涓€備粈涔堬紵浣犻棶鎴戜负浠€涔堬紵璇锋墦寮€浣犵殑index.html鐪嬬湅锛屼綘蹇樹簡鎴戜滑鐨凙pp.vue鏄寕鍦ㄨ繖涓猧d涓篴pp鐨勭湡瀹炲厓绱犱腑鐨勶級閭d箞鎴戜滑鐨勬搷浣滄€濊矾寰堢畝鍗曪紝褰撴垜鎸変笅鍏ㄥ眬鎼滅储鎸夐挳锛岀劧鍚庝綘鍙互鍦?divid="app">鍏冪礌涔嬪墠鎻掑叆鎴戠殑缁勪欢銆傚ソ浜嗭紝鍒拌繖閲屾垜浠凡缁忓彲浠ョ湅鍒板熀鏈殑鏁堟灉浜嗭紝鎴戜滑鏉ユ祴璇曚竴涓嬨€傝鎴戜滑鍦ˋpp.vue缁勪欢涓紪鍐欎竴涓殢鏈烘寜閽紝骞跺湪SearchBarCreator瀹炰緥涓婅皟鐢╬resent鏂规硶銆傦紙maker瑙夊緱涓嶅悎鐞嗭紝鍚庢潵鎴戜滑鎶婂悕瀛椾粠SearchBarMaker鏀规垚浜哠eachBarCreator锛屽彧鏄悕瀛楀彉浜嗭紝閫昏緫涓€鐐归兘娌″彉銆傪煃︼級鏁堟灉濡備笅锛氬浘鐗囦笂浼犲鐞?..杩欓噷宸茬粡鏈変簡searchBar瀹冨憟鐜板湪椤甸潰涓婏紝浣嗘垜浠粛鐒朵笉鐭ラ亾濡備綍璁╁畠娑堝け銆傚叾瀹炲緢绠€鍗曘€傛垜浠彧闇€瑕侀€傛椂绉婚櫎dom鍏冪礌鍗冲彲銆傝繖閲屾垜浠渶瑕佺煡閬撲竴浠朵簨锛屾垜浠渶瑕佸皢searchBar鎻愬崌鍒板綋鍓嶆枃浠剁殑global锛岃€屼笉浠呬粎鏄痭ewinopen銆傚ソ浜嗭紝涓嬮潰鎴戜滑鏉ユ祴璇曚竴涓嬪浘鐗囦笂浼犳祦绋嬧€︹€?.浼樺寲SearchBarCreator鏋勯€犲嚱鏁扮殑浠g爜閫昏緫鍐欏埌杩欓噷鐨勬椂鍊欙紝浣犲彲鑳戒細鍙戠幇涓€涓皬闂銆傚綋鎴戜竴鐩存寜鎼滅储鎸夐挳鏃讹紝瀹冧細鍑虹幇澶氫釜鎼滅储妗嗭紝浣嗘垜浠兂瑕佺殑鏄叏灞€鍙兘鏈変竴涓悳绱㈡銆傛崲涓搴︽兂锛屽氨鏄湪鍚屼竴鏃堕棿锛屽彧鑳藉嚭鐜版垜浠垱寤虹殑SeachBar鐨勪竴涓疄渚嬨€傛兂鎯仇煠旓紝鎴戝姞涓€涓彉閲忥紝isShowing鏄惁姝e湪鏄剧ず锛屽鏋滄鍦ㄦ樉绀猴紝閭d箞褰撶敤鎴峰啀娆¤皟鐢╬resent鏃讹紝鎴戜細璋冪敤瀹炰緥鏈韩鐨刣ismiss鏂规硶璁╁畠娑堝け锛屾槸鍚﹀彲琛岋紵5.缂栧啓涓€涓叏灞€鍞竴鐨勮皟鐢ㄥ疄渚嬪湪涓婇潰鐨勪緥瀛愪腑锛屾垜浠凡缁忓彲浠ュ湪App.vue鏂囦欢涓柊寤轰竴涓疄渚嬫潵璋冪敤鎼滅储妗嗕簡銆備絾鏄垜浠幇鍦ㄩ渶瑕佸湪XXX.vue鏂囦欢涓粰杩欎釜鎼滅储妗嗚捣浠€涔堝悕瀛楀憿锛熻繕闇€瑕侀噸鏂颁粙缁嶏紝鐒跺悗閲嶆柊new鍚楋紵nonono锛屽ぇ浣绋嬪簭鍛樺緢鎳掓儼锛屼笉鍙兘鍐欏嚭杩欎箞浣庣骇閲嶅鐨勪唬鐮併€傞偅涔堝浣曞疄鐜板憿锛熸墦寮€鎴戜滑涔嬪墠鍑嗗鐨剈seSearch.ts鏂囦欢锛屾垜浠皢App.vue涓叏灞€鐢熸垚鐨凷earchBar瀹炰緥杞崲鎴愪竴涓叏灞€鐨則s鏂囦欢锛岀劧鍚庢妸鍏朵腑鐨勪竴浜涙柟娉曞皝瑁呮垚鍑芥暟瀵瑰鏆撮湶銆傜劧鍚庢垜鍙互鍦ㄤ笘鐣屼换浣曞湴鏂圭殑杩欎釜瀹炰緥涓婅皟鐢ㄨ繖涓や釜鏂规硶銆傝鎴戜滑鍦ˋpp.vue涓皾璇曚竴涓嬨€傝繖鏄垜浠箣鍓岮pp.vue鏂囦欢鐨勮皟鐢ㄦ柟娉曘€傝鎴戜滑鏀归€犲畠銆傝繖鏍蜂竴鏉ワ紝灏辨柟渚垮浜嗭紝鎴戜滑鍙互鎶婅繖涓€滈殢澶勫彲瑙佺殑鍞竴鎼滅储妗嗏€濈О涓哄叚銆傛坊鍔犲叏灞€蹇嵎閿瓹ommand+K鍦ㄦ涔嬪墠锛屾垜浠渶瑕佷簡瑙d竴涓蹇碉紝娉ㄦ剰鎴戜滑鐨刴ain.ts鏂囦欢锛屾垜浠湪鏁翠釜涓栫晫id='app'鐨勭湡瀹瀌om涓嬫寕浜嗚皝锛熸病閿欙紝灏辨槸鎴戜滑鍓嶉潰鎻愬埌鐨凙pp.vue缁勪欢銆傞偅涔堝鏋滄垜鍦ˋpp.vue缁勪欢鎸傝浇鐨勬椂鍊欑粰鍏ㄥ眬鐨剋indow瀵硅薄鍔犱笂涓€涓敭鐩樹簨浠讹紝鏄笉鏄氨鍙互浜嗗憿锛熷浣曟坊鍔狅紵浜嬪疄涓婏紝瀹冮潪甯搁潪甯哥畝鍗曘€傝浣跨敤缁勫悎閿紝鎴戜滑闇€瑕佷娇鐢ㄢ€渒eydown鈥濄€傚叿浣撲负浠€涔堜笉鏄€渒eypress鈥濓紝璇昏€呭彲浠ユ煡鐪嬩袱鑰呯殑鍖哄埆锛岃繖涓嶆槸鏈枃涓昏璁ㄨ鐨勫唴瀹广€傝繖涓椂鍊欐垜浠厛鐐筩ommand鐪嬬湅鎵撳嵃鍑烘潵鐨勬槸浠€涔堛€傝繖閲岀殑鍏抽敭鍐呭鏄敭鐩樹簨浠朵笂鐨刴etaKey灞炴€с€傝繖閲屾垜浠篃鍙互鎺ㄦ柇鎸変笅鈥渃trl鈥濈殑浜嬩欢鏄竴涓敮鎸佸涓寜閿悓鏃舵寜涓嬬殑keydown浜嬩欢銆傚綋鎴戜滑鍚屾椂鎸変笅鈥滃懡浠も€濆拰鈥淜鈥濋敭鏃朵細鍙戠敓浠€涔堬紵浣嗘槸鎴戜滑鍙戠幇濂藉儚娌℃湁K:true杩欎釜灞炴€э紝閭f垜浠€庝箞鍒ゆ柇鍛紵鍒媴蹇冿紝缁х画璇讳笅鍘汇€傛垜浠彲浠ョ湅鍒伴敭鐩樹簨浠朵簨浠朵笂鏈変竴涓猭ey灞炴€э紝瀹冪殑鍊兼濂芥槸瀛楃涓茬被鍨嬬殑鈥渒鈥濄€傝繖閲屾垜鐩存帴鍏竷鍐欐硶銆俲s鍙互璁╂垜浠垽鏂袱涓寜閽槸鍚﹀悓鏃舵寜涓嬨€傝鎴戜滑娴嬭瘯涓€涓嬶紝璁╂垜浠幓鍒犻櫎App.vue鏂囦欢涓殑杩欎袱涓寜閽紝鐒跺悗鍦ㄦ垜浠寜涓媍ommand鍜宬鏃舵墦鍗板畠銆?.娣诲姞鍑虹幇鐨勫姩鐢汇€傛濡傛垜浠湪涓婇潰鐪嬪埌鐨勯偅鏍凤紝杩欐牱绐佺劧鐨勫嚭鐜版樉寰楁湁浜涚獊鍏€銆傛垜甯屾湜鍦ㄥ嚭鐜版悳绱㈡鐨勬椂鍊欙紝鑳芥湁杞诲井鐨勭炕璇戞晥鏋滐紝锛堢被浼间笅闈㈢殑鏁堟灉锛夋€庝箞鍋氬埌鐨勶紵杩欓噷鎴戜粙缁嶄竴涓瘮杈冪畝鍗曠殑鎬濊矾銆傛垜浠湪App.vue鏂囦欢鐨勬牱寮忎腑棰勮浜嗕竴涓狢ss鍔ㄧ敾锛屽苟缁欏畠鍙栦簡涓€涓ソ鍚殑鍚嶅瓧銆傚皢鍏剁О涓衡€渟earchInput鈥濆苟杩斿洖鍒版垜浠殑searBar.vue缁勪欢锛屼负璇ョ粍浠剁殑鏈€澶栧眰璧蜂竴涓ソ鍚殑鍚嶇О锛屾垜鍦ㄨ繖閲屽皢鍏剁О涓簊earchBarWrapper銆傜劧鍚庡洖鍒版垜浠殑SearchBar.ts鏂囦欢锛岃繖鏄垜浠斁缃甋eachBarCreator鏋勯€犲嚱鏁扮殑鍦版柟銆?tips:涓嶆槸useSearch.ts)杩欓噷鍏堣В閲婁竴涓嬫€濊矾銆傝皟鐢╮ender鍑芥暟鍚庯紝杩欎釜缁勪欢瀹為檯涓婂凡缁忔覆鏌撴垚浜嗕竴涓湡姝g殑dom鍏冪礌锛屽彧鏄垜浠繕娌℃湁涓哄畠鎸囧畾娓叉煋浣嶇疆銆傛棦鐒舵槸鐪熸鐨刣om锛岄偅涔堟垜浠氨鍙互閫氳繃document.getElementById鏂规硶鑾峰彇鍒癝earchBar.vue缁勪欢锛坬uerySelector涔熸槸涓€鏍风殑锛屼竴涓剰鎬濓級锛岀劧鍚庢垜鍙鍦ㄨ皟鐢╠ocument.body.insertBefore鏂规硶涔嬪墠娣诲姞鍗冲彲鍒氭墠鎴戜滑鍦ˋpp.vue涓璁剧殑绫诲悕锛宻earchInput锛屽畬缇庣殑瀹炵幇浜嗘垜浠兂瑕佺殑鏁堟灉銆傛敞鎰忥細style锛岃繖鐐瑰彧鏄竴涓被鍚嶉€夋嫨鍣紝涓嶈蹇樹簡鍩虹銆?.鑷姩瀵圭劍鍦ㄥ脊鍑烘鐨勮緭鍏ユ瀹炵幇鑷姩瀵圭劍锛岀浉姣斿墠闈㈣鐨勯潪甯哥畝鍗曪紝杩欓噷涔熺畝鍗曟彁涓€涓嬨€傚湪nextTick涓皟鐢╥nput鏈韩鐨刦ocus鏂规硶鍗冲彲銆傛€荤粨锛氭垜涔嬫墍浠ヤ笉鍠滄鐢ㄧ湡瀹炰唬鐮佸啓鏂囩珷鑰屽ぇ閲忎娇鐢ㄦ埅鍥撅紝鏄洜涓烘垜鎼滅储鍒拌嚜宸辨兂瑕佺殑鏂囩珷鍚庯紝涔熷枩娆㈢湅鐪嬫湁娌℃湁鏈€缁堜骇鍝佷唬鐮侊紝鐒跺悗copy鐩存帴鎷挎潵鐢ㄨ繃锛屼絾寰€寰€蹇界暐浜嗚嚜宸卞姩鎵嬬湡姝g悊瑙e畠鐨勮繃绋嬨€?/p>