浠€涔堟椂鍊欏皝瑁呮垚缁勪欢锛熶粈涔堟椂鍊欏皝瑁呮垚鎸囦护锛熶竴鑸鏋滆灏佽鐨勪唬鐮佷腑鍖呭惈澶ч噺鐨凥TML锛屽氨闇€瑕佷娇鐢ㄧ粍浠躲€傜浉鍙嶏紝濡傛灉浣犲彧瀵规煇涓狣OM/缁勪欢鐨勬牴DOM杩涜鎿嶄綔锛岄偅涔堜綘鍙互閫夋嫨灏嗗叾灏佽鎴愪竴涓懡浠ゃ€傗€滄嫋鍔ㄢ€濈瓑鎵嬪娍鐨勮瘑鍒彧鏄瘑鍒煇涓厓绱?缁勪欢涓婄殑鈥滈紶鏍?瑙︽懜鈥濓紝涓嶆秹鍙奃OM鎿嶄綔锛屾墍浠ヨ繖閲岀殑灏佽閫夋嫨鈥滃懡浠も€濄€傛渶缁堢洰鏍囷紙v-touch鎸囦护锛夊厛鐪嬬洰鏍囷紝鍐嶅垎鏋愩€?/main.jsimportVTouchfrom'@any-touch/vue3';//...鐪佺暐constapp=createApp(App);app.mountd('#app');app.use(VTouch);鐢变簬鎴戜滑瑕佺敤app.use鍒濆鍖栵紝鎵€浠ラ渶瑕佸皝瑁呮垚vue鎻掍欢銆傛彃浠舵湁鍥烘湁鐨勬牸寮忥紝鍚庨潰鎴戜滑浼氬紑鍙戠紪鍐欍€傞渶瑕佹敮鎸佹墜鍔匡紝杩欓噷浣跨敤any-touch锛屼竴涓笉渚濊禆js鐨勬墜鍔胯瘑鍒簱銆傜煡璇嗙偣锛堭煔€灏忚创澹級鍦╲ue涓紝鍙互閫氳繃鈥淍鈥濊娉曠洿鎺ユ帴鏀惰嚜瀹氫箟DOM浜嬩欢锛屾墍浠ユ垜浠叾瀹炲彲浠ヨ嚜宸卞疄鐜颁换浣曗€渪x鈥濅簨浠讹紝鏈€缁堝彲浠ラ€氳繃鈥淍xx鈥濊繘琛岀洃鍚€俢onstevent=newEvent('xx');this.$refs.xxEl.dispatchEvent(event);鈥榓ny-touch鈥欏唴閮ㄨЕ鍙戠殑鎵嬪娍浜嬩欢閮芥槸瑙﹀彂鍘熺敓DOM浜嬩欢锛屾墍浠ue鍙互鐩存帴鐩戝惉锛屽氨鍍忊€淍tap鈥濈瓑銆傜紪鍐欐彃浠剁殑鏍煎紡銆倂ue鎻掍欢棣栧厛闇€瑕佹槸涓€涓璞★紝閲岄潰鍖呭惈涓€涓猭ey-valueinstall锛屽搴旂殑value鏄竴涓嚱鏁帮紝鍙傛暟鏄竴涓獀ue瀹炰緥銆傚氨鏄繖鏍凤細exportdefault{install:(app)=>{//logic},};缁勪欢涔熸湁鐢熷懡鍛ㄦ湡锛屾瘮濡俶ounted鍜寀nmounted锛屽垎鍒唬琛ㄦ寚浠ゆ墍鍦ㄥ厓绱犫€滃姞杞藉悗鎵ц鈥濆拰鈥滈攢姣佹椂鎵ц鈥濄€傝繖閲屾垜浠娇鐢ㄨ繖涓や釜閽╁瓙鏉ユ墽琛宎ny-touch鐨勫垵濮嬪寲鍜岄攢姣佲€嬧€嬨€傛帴涓嬫潵锛屾垜浠紑濮嬪皝瑁呪€渧-touch鈥濇寚浠ゃ€傛敞鎰忥細鎴戜滑鍦ㄤ唬鐮佷腑灏嗘寚浠ゅ懡鍚嶄负鈥渢ouch鈥濓紝浣嗘槸鍦ㄧ粍浠朵腑浣跨敤瀹冩椂锛岄渶瑕佸啓鈥渧-touch鈥濓紝浠モ€渧-鈥濆紑澶寸殑灞炴€э紝vue浼氱煡閬撹繖鏄竴鏉″懡浠ゃ€備粠鈥滀换鎰忚Е鎽糕€濆鍏Touch锛沜onstelAndAtMap=newWeakMap();exportdefault{install:(app)=>{app.directive('touch',{mounted(el){//鍒濆鍖朿onstat=newATouch(el);elAndAtMap.set(el,at);},unmounted(el:SupportElement){//閿€姣乪lAndAtMap.get(el).destroy();},});},};杩欓噷浣跨敤WeakMap鏉ュ瓨鍌ㄦ瘡娆′娇鐢ㄢ€渧-touch鈥濇椂浜х敓鐨勨€渁ny-touch鈥濆疄渚嬨€傚啓杩欎釜鍑芥暟灏卞畬鎴愪簡銆備絾鏄垜浠殑鐩爣鏄敤ts鍐欙紝璇风户缁線涓嬬湅銆傛墦瀛楃棣栧厛鎴戜滑闇€瑕佷粙缁嶅皢鐢ㄤ簬鏍囪鎴戜滑浠ｇ爜鐨勭被鍨嬨€備粠'vue'瀵煎叆绫诲瀷{App锛孌irectiveBinding}锛涗粠鈥滀换鎰忚Е鎽糕€濆鍏ョ被鍨媨Options,SupportElement}锛汚pp浠ｈ〃vue瀹炰緥绫诲瀷銆侱irectiveBinding琛ㄧず鎸囦护鐨勫弬鏁扮被鍨嬨€傚鏋滀綘闇€瑕佺害鏉熸寚浠ょ殑鍊硷紝渚嬪瑕侀檺鍒秜-touch=鐨勫€煎彧鑳芥槸鏁板瓧绫诲瀷锛岄渶瑕佸啓鎴怐irectiveBinding銆侽ptions鏄痑ny-touch鐨勫弬鏁扮被鍨嬨€係upportElement鏄痑ny-touch鏀寔鐨勫厓绱犵被鍨嬶紝鍏跺疄灏辨槸HTMLElement|SvgElement銆傝鎸囦护鐨勪环鍊兼槸浠€涔堬紵鑾峰彇濡備笅浠ｇ爜锛屼负v-touch鍛戒护娣诲姞涓€涓弬鏁板€硷紝閫氳繃鍛戒护鐨勫€煎皢鍙傛暟浼犻€掔粰any-touch銆傛垜浠€氳繃鎸傝浇閽╁瓙鍑芥暟鐨勭浜屼釜鍙傛暟鑾峰彇鍊笺€傚弬鏁版槸涓€涓璞★紝瀹冪殑鈥滃€尖€濆瓧娈靛氨鏄痸-touch=涔嬪悗鐨勫€笺€傜敱浜巃ny-touch鐨勫弬鏁版槸鎸囦护鐨勫€硷紝閭ｄ箞鎴戜滑灏嗙浜屼釜鍙傛暟鐨勭被鍨嬫爣璁颁负锛欴irectiveBindingmounted(el:SupportElement,binding:DirectiveBinding){}鍦ㄥ畬鏁翠唬鐮佷笅闈紝鎴戜滑鏍囪绫诲瀷銆備粠'vue'瀵煎叆{App锛孌irectiveBinding}锛涗粠鈥滀换鎰忚Е鎽糕€濆鍏ョ被鍨媨Options,SupportElement}锛涗粠鈥滀换鎰忚Е鎽糕€濆鍏Touch锛沜onstelAndAtMap=newWeakMap();exportdefault{install:(app:App)=>{app.directive('touch',{mounted(el:SupportElement,{value}:DirectiveBinding){elAndAtMap.set(el,newATouch(el,value));},unmounted(el:SupportElement){elAndAtMap.get(el).destroy();},});},};婧愮爜鍦板潃宸茬粡瀹炵幇鍒拌繖閲屼簡锛屾湁鍏磋叮鐨勫彲浠s鐭ラ亾涓嶆噦鐨勫彲浠ョ湅鐪嬫垜鐨則s鍩虹璇俱€倀ypescript鍏ラ棬鍩虹绗竴璇撅紝typescript缁忛獙绗簩璇撅紝鍩虹绫诲瀷鍜屽叆闂ㄩ珮绾х被鍨嬬涓夎锛屾硾鍨嬬被鍨嬬鍥涜锛岄珮绾х被鍨嬭В璇荤浜旇锛屽懡鍚嶄粈涔堟槸鐗规畩绌洪棿锛堝懡鍚嶇┖闂达級锛屽涔爒ue3涓殑typescript馃敟婧愮爜馃-銆婃槸銆嬬6璇撅紝浠€涔堟槸澹版槑鏂囦欢锛坉eclare锛夛紵馃-GlobalDeclaration绗?璇撅紝閫氳繃vue3瀹炰緥璁茶declaremodule璇硶濡備綍浣跨敤馃ModuleDeclaration馃崟瀛︿範浜掑姩鎰熻阿闃呰锛屾湁闂鍙互鍔犳垜寰俊锛屾垜鎷変綘鍏ュ井淇＄兢锛堝洜涓鸿吘璁寰俊缇ゆ湁100浜虹殑闄愬埗锛岃秴杩?00浜哄悗蹇呴』鐢辩兢鎴愬憳鎷夎繘鏉ワ級
