你觉得Vue3封装一个弹框组件容易吗？
鎬荤粨锛歍ips锛歍eleport鐢ㄤ簬灏佽寮规缁勪欢锛岄伩鍏嶄簡缁勪欢宓屽鍙兘甯︽潵鐨勫畾浣嶅眰娆￠殣鎮ｃ€傚畠杩樹娇鐢╠efineProps銆乨efineEmits鍜宻lots鏉ュ鍔犵粍浠剁殑鍙墿灞曟€с€傪煂拆煂插墠瑷€锛氭垜涔嬪墠娌℃湁灏佽杩囧脊绐楃粍浠讹紝浣嗘垜瑙夊緱涓€涓皬灏忕殑寮圭獥缁勪欢涓嶆槸灏忎簨銆傜劧鍚庝粖澶╂柊椤圭洰涓渶瑕佷竴涓脊绐楃粍浠讹紝浜庢槸鑷繁鍋氫簡涓€涓€備笉鍋氫篃娌″叧绯汇€備竴鏃﹀仛浜嗭紝浣犱細鍙戠幇杩樻槸鏈夊緢澶氫笉鍚岀殑灏忛棶棰橈紝鐒跺悗鎶婇亣鍒扮殑闂鍒嗕韩缁欏ぇ浣滑銆傝鎴戜滑浠庡洖椤鹃渶姹傚紑濮嬶紝杩欐槸涓€涓叏鐞冧娇鐢ㄧ殑鍏叡寮规缁勪欢銆傜劧鍚庡氨鏄嚑涓叧閿偣锛歱ublic銆乬lobal銆乸op-upframe銆傛帴涓嬫潵鎴戜滑閽堝杩欏嚑鐐规潵绋嶅井瀹炵幇涓€涓嬪脊鍑烘缁勪欢銆傪煃煃叕寮€馃崿馃崿鍏紑寰堢畝鍗曘€傜浉淇″湪搴х殑鍚勪綅澶т浆锛屼竴瀹氳兘澶熻交鑰屾槗涓剧殑鍋氬埌銆傞鍏堝疄鐜颁竴涓鏂囧唴瀹癸紝鎴戠殑鏂规硶鏄娇鐢ㄦЫ鍜屽弬鏁颁紶閫掋€傝绀轰緥浠呬紶閫掍袱涓弬鏁帮紝涓€涓爣澶村唴瀹瑰拰涓€涓帶鍒跺紑鍜屽叧鐨勫竷灏斿€笺€備富瑕佹秹鍙婂埌Vue3鐨勪袱涓狝pis鐨刣efineProps銆乨efineEmits鍜宻lot鐨勪娇鐢ㄣ€?template>//閬僵灞?divclass="modal_all"v-if="visible">//鏂逛究缁欓〉闈㈡坊鍔犺嚜瀹氫箟澶撮儴{{title}}
//鎵撳紑寮圭獥鍐呭浣跨敤 //鏍峰紡鐪佺暐澶嶅埗浠ｇ爜馃崿馃崿鍏ㄥ眬馃崿馃崿鍩烘湰甯冨眬宸笉澶氾紝涓嬮潰鏄叏灞€娉ㄥ唽锛岀洰鐨勬槸閬垮厤姣忔閮藉紩鍏ョ敤鏉ャ€倂ue2鍦ㄦ敞鍐屽叏灞€缁勪欢鏃讹紝鍙渶瑕乂ue.component('name',component)鍗冲彲锛岄偅涔堝湪vue3涓浣曟壒閲忔敞鍐屽叏灞€缁勪欢鍛紵鎻愪緵浣跨敤app.use()鑷姩璋冪敤鐨勫畨瑁呮柟娉曘€俰mportModalfrom'./Modal/Modal.vue';importMaskfrom'./Modal/Mask.vue';//鑴氭湰璁剧疆涓笉鑳藉啓name锛屾墍浠ュ姞涓€涓猚onstcoms=[{name:'Modal',//浣跨敤缁勪欢鍚嶇Оcompent:Modal,},{name:'Mask',component:Mask,},];exportdefault{install:(app)=>{coms.forEach((item)=>{app.component(item.name,item.component);});},};//main.tsimportCommonfrom'./common/index';constapp=createApp(App);app.use(Common);浠ｇ爜馃崿馃崿寮规馃崿馃崿鍏跺疄寮规缁勪欢鍐欏埌杩欓噷灏卞樊涓嶅浜嗭紝涓轰粈涔堣鍗曠嫭鍒楀嚭寮规鍛紵鐩镐俊灏忎紮浼翠滑鍦ㄦ棩甯稿伐浣滀腑涔熼亣鍒拌繃瀹氫綅銆佸眰绾х殑闂銆傚鏋滄垜浠皢闇€瑕佸畾浣嶇殑缁勪欢宓屽鍦╒ue鐨勬煇涓粍浠跺唴閮紝鐢变簬css灞傚眰鍙犲彔锛屾垜浠氨鏄湪澶勭悊宓屽瀹氫綅銆傚浘灞傚拰鏍峰紡浼氬彉寰楀緢鍥伴毦锛屼竴涓嶅皬蹇冨氨浼氬嚭鐜颁竴浜涘鎬殑闂锛岄偅涔堝浣曢伩鍏嶈繖涓棶棰樺憿锛熸帴涓嬫潵锛屾垜浠皢浣跨敤Vue3涓殑鍙︿竴涓叆鍙pi锛歍eleport銆俆ips锛歍eleport鏄皢鎴戜滑鐨勭粍浠舵寕杞藉埌灞炴€у搴旂殑DOM鍏冪礌涓婏紝绫讳技浜庝换鎰忛棬銆傞鍏堜唬鐮侊細
{{title}} 