.dialog-page{position:fixed;椤堕儴锛?锛涚寮€鍚細0锛涘搴︼細100vw锛涢珮搴︼細100vh锛涜儗鏅壊锛歳gba(0,0,0,0.6);z-鎸囨暟锛?9999锛?dialog-box{浣嶇疆锛氱粷瀵癸紱椤堕儴锛?0%锛涘乏锛?0%锛涜浆鎹細translateX(-50%)锛涗繚璇侀噾锛氳嚜鍔紱瀹藉害锛?00px锛涢珮搴︼細400px锛涘～鍏呴《閮細20px锛涜儗鏅壊锛?fff锛涜竟鐣屽崐寰勶細10px锛涙闃村奖锛?06px0#fff锛?title{鏂囨湰瀵归綈锛氬眳涓紱瀛椾綋澶у皬锛?2px锛涢鑹诧細#333锛泒.close{浣嶇疆锛氱粷瀵癸紱鍙筹細20px锛涢《閮細20px锛涙父鏍囷細鎸囬拡锛泒.confirm-btn{瀹藉害锛?0%锛涗綅缃細缁濆锛涘乏锛?0%锛涘簳閮細50px锛泒}}.fade-enter-active,.fade-leave-active{transition:opacity.2s;}.fade-enter,.fade-leave-to/*.fade-leave-activebelowversion2.1.8*/{opacity:0;}鍓嶈█鐜板湪鍓嶇寮€鍙戜及璁￠兘鏄敤Vue銆傜粍浠朵篃鏄疺ue鐨勬牳蹇冨唴瀹癸紝涔熸槸鎴戜滑鍦ㄦ棩甯稿紑鍙戜腑鎺ヨЕ鏈€澶氱殑涓滆タ銆傞偅涔堜粈涔堟槸缁勪欢鍛紵涓€涓粍浠跺彲浠ュ皬鍒颁竴涓寜閽€佷竴涓浘鏍囷紝涔熷彲浠ュぇ鍒颁竴涓〉闈紝鐢氳嚦鏄竴涓郴缁熴€傛渶杩戞帴鎵嬩簡涓€涓猇ue椤圭洰锛屽彲浠ヨ鏄敹鑾烽涓帮紝鍖呮嫭鏈枃鎻愬埌鐨勨€滅粍浠垛€濓紝鎵€浠ユ兂鍐欎笅鏉ュ垎浜竴涓嬨€傛湰鏂囦笉璁茬粍浠剁殑鍩虹鐭ヨ瘑锛屽彧璁插嚑绉嶅垱寤虹粍浠讹紙娉ㄥ唽锛夌殑鏂规硶銆傚叏灞€娉ㄥ唽Vue.component('my-component-name',{//...options...})鎴戜滑鍙互閫氳繃杩欑鏂瑰紡鍒涘缓鍏ㄥ眬缁勪欢锛屽湪瀹炰緥鍖朧ue涔嬪墠浣跨敤Vue.component鍒涘缓缁勪欢锛岃繖鏍锋垜浠氨鍙互鍦ㄥ疄渚嬪寲Vue鐨勪换浣曠粍浠讹紙鏂癡ue锛変腑浣跨敤瀹冦€傚叿浣撴柟娉?銆佹敞鍐岀粍浠禫ue.component('component-a',{/*...*/})Vue.component('component-b',{/*...*/})Vue.component('component-c',{/*...*/})newVue({el:'#app'})2.浣跨敤缁勪欢
杩欐牱鎴戜滑灏辨垚鍔熺殑鍒涘缓浜嗘敞鍐屽拰浣跨敤鐨勭粍浠讹紝骞朵笖鍦ㄥ垱寤虹殑鍐呴儴涔熷彲浠ヤ簰鐩镐娇鐢ㄤ簡鎴愬垎銆傞儴鍒嗘敞鍐屾垜浠彲浠ュ垱寤烘櫘閫氬璞″舰寮忕殑缁勪欢锛屽叾涓彲浠ュ寘鍚垜浠父鐢ㄧ殑鏁版嵁銆佹柟娉曚互鍙婂叾浠栧睘鎬у拰鏂规硶锛屾瘮濡備笅闈㈢殑varComponentA={/*...*/}varComponentB={/*鈥︹€?/}varComponentC={/*...*/}娉ㄥ唽鏈湴缁勪欢銆傛垜浠渶瑕佷娇鐢ㄧ粍浠舵潵娉ㄥ唽鎴戜滑瑕佷娇鐢ㄧ粍浠剁殑鍦版柟锛堝ぇ澶氭暟鎯呭喌涓嬩篃鏄粍浠讹級銆傚叿浣撲唬鐮佸涓媙ewVue({el:'#app',components:{'component-a':ComponentA,'component-b':ComponentB}})鍗曟枃浠剁粍浠跺湪鎴戜滑浣跨敤webpack鐨勬椂鍊欏彲鑳界敤鐨勬瘮杈冨鏋勫缓鎴戜滑鐨勯」鐩紙渚嬪锛歷ue-cli锛夛紝缂栧啓鐨勫崟鏂囦欢缁勪欢姣旇緝澶氾紝闇€瑕佸湪缁勪欢涓娇鐢ㄥ彟澶栦竴涓粍浠讹紝濡備笅鎴戦殢渚垮啓锛屾垜浠湪vue-cli3.0鐨勫熀纭€涓婂啓銆傞鍏堬紝鎴戜滑鎸夌収涓婇潰鐨勬柟寮忓垱寤轰竴涓粍浠?//components/Dialog/Dialog.vue
