vue.extend登录注册模态框
妯℃€佹鏄垜浠琔I鎺т欢涓潪甯搁噸瑕佺殑涓€涓粍浠讹紝浣跨敤鍦烘櫙闈炲父澶氥€傛垜浠湪Vue缁勪欢涓垱寤烘ā鎬佹缁勪欢鐨勭煡璇嗙偣涔嬩竴灏辨槸浣跨敤Vue.extend鏉ュ垱寤恒€傛枃妗ｄ腑鐨勮В閲婃槸浣跨敤Vue.extend鏉ユ敼杩涙垜浠殑浠ｇ爜锛岃鎴戜滑鐨勪唬鐮侀€昏緫鏇存竻鏅帮紝鍦ㄥ仛涓€涓父瑙佺殑鐧诲綍/娉ㄥ唽涓氬姟鍦烘櫙鏃讹紝濡備笅鎵€绀恒€傝姹傦細鐐瑰嚮鐧诲綍鎴栨敞鍐岋紝鏄剧ず鍚勮嚜鐨勬ā鎬佹銆傚浜庤繖绉嶅父瑙佺殑鐧诲綍娉ㄥ唽涓氬姟锛屾垜浠竴鑸皢鍏跺垎涓篠igin.vue鍜孯egister.vue涓や釜缁勪欢锛岀劧鍚庡皢杩欎袱涓粍浠跺啓鍒癆pp.vue缁勪欢鎴栬€卨ayout.vue缁勪欢涓€傛渶鍒濈殑鐢ㄩ€旀槸鍒嗘暎缁欐垜浠暣涓櫥褰曞拰娉ㄥ唽閫昏緫銆備竴浜涢渶瑕佺櫥褰曟垨鑰呮潈闄愮殑閫昏緫鍙兘闇€瑕佺壒鎰忔娊鍙栦竴涓猇isible鏉ユ帶鍒舵垜浠殑鐧诲綍妗嗐€備娇鐢╒ue.extend鍙互瀹炵幇鎺ュ彛缁熶竴锛屼笉瀛樺湪閫昏緫鍒嗘暎銆備互涓嬬ず渚嬩粎渚涘弬鑰冦€傚鏋滀綘涓嶇煡閬撳浣曚娇鐢╝pi锛屼綘鍙互鐞嗚В瀹冦€傚鏋滀綘鐪嬫噦浜嗭紝娆㈣繋鎸囧馃槂鍦ㄧ粍浠朵腑娣诲姞涓€涓柊鐨凩oginModel鐩綍锛屽苟鏂板缓涓€涓猄igin.vue骞舵敞鍐屻€倂ue涓や釜缁勪欢login
registration
鐒跺悗鏂板缓涓€涓猧ndex.vue缁勪欢
鏂板缓涓€涓猧ndex.js瀛愮被锛宨mportourindex.vueimportVuefrom"vue";importModalCopsfrom"./index.vue";constLoginModal=Vue.extend(ModalCops);//鍒涘缓涓€涓猇ue瀛愮被let瀹炰緥锛沜onstModalBox=(options={})=>{if(instance){instance.doClose();}//瀹炰緥鍖杋nstance=newLoginModal({data:{show:true,//鏄剧ず...瀹炰緥鍖栧悗鐨勯€夐」}});瀹炰緥.$mount();document.body.appendChild(instance.$el);//娣诲姞modal鍒癰odyreturninstance;};//瀵瑰簲鐧诲綍ModalBox.sigin=()=>{returnModalBox({type:"sigin"});};ModalBox.register=()=>{returnModalBox({type:"register"});};exportdefault{install(Vue){Vue.prototype.$loginer=ModalBox;}};鍒涘缓瀹屾垚鍚庯紝鎴戜滑鍙互灏嗗叆鍙ｆ寕杞藉埌Vue瀹炰緥//main.jsimportLoginModalfrom"./components/LoginModal";Vue.use(LoginModal);鍙皟鐢?div>
鐧诲綍/娉ㄥ唽 onLogin(type){this.$loginer({type})}鏁堟灉濡備笅楠岃瘉浜嬩欢鎴戜滑閮界煡閬撴ā鎬佹闇€瑕佸叧闂簨浠讹紝鑰屾绫讳笟鍔＄殑鍏抽棴浜嬩欢蹇呴』楠岃瘉鎻愪氦淇℃伅锛屾墍浠ユ垜浠渶瑕佹坊鍔犲叧闂洖璋冨嚱鏁颁慨鏀筍igin.vue鍜孯egister.vue涓や釜缁勪欢锛屾坊鍔犱簨浠?/Sigin.vue
鐧诲綍纭
//Register.vue
娉ㄥ唽纭淇敼index.vue娣诲姞$emit浜嬩欢
淇敼index.js鏂囦欢浠?vue"瀵煎叆Vue;浠?./index.vue"瀵煎叆ModalCops;constLoginModal=Vue.extend(ModalCops);letinstance;constModalBox=(options={})=>{if(instance){instance.doClose();}instance=newLoginModal({data:{show:true,...options}});instance.ok=()=>{returnnewPromise(resolve=>{constbefore=options.ok?options.ok():false;if(before&&before.then){before.then(()=>resolve(true),()=>{console.log("reject");});}elseif(typeofbefore==="boolean"&&before!==false){resolve(true);}});};瀹炰緥.$mount();鏂囨。.body.append瀛╁瓙锛堝疄渚嬨€?el锛夛紱杩斿洖瀹炰緥;};ModalBox.sigin=ok=>{returnModalBox({type:"sigin",ok});};ModalBox.register=ok=>{returnModalBox({type:"register",ok});};ModalBox.close=()=>{instance.doClose();instance.show=false;};exportdefault{install(Vue){Vue.prototype.$loginer=ModalBox;}};浣跨敤鍥炶皟onLogin(type){constfuncs={sigin:()=>{console.log("loginrequest");},娉ㄥ唽:()=>{console.log("娉ㄥ唽璇锋眰");}};this.$loginer({type,ok:()=>{returnnewPromise((resolve,reject)=>{//isOk妫€鏌ユ暟鎹槸鍚︽纭甶f(this.isOk){funcs[type]();resolve();}else{reject();}});}});}鏁堟灉濡備笅
