路飞项目--05

登录模态框分析

思路:

1、登录,注册,都写成组件,在任意页面中都能点击显示登录模态框
2、写好的组件,应该放在大组件中
3、如果写简单,登录注册做成页面组件,点击路由跳转即可
4、放在Header.vue中,以后任意页面组件引入Header 都会有登录注册的按钮
5、点登录按钮,把Login.vue 通过定位占满全屏,透明度设为 0.5 纯黑色背景覆盖在组件上
6、在Login.vue点关闭,要把Login.vue隐藏起来,父子通信之子传父,自定义事件

路飞项目--05_第1张图片

登录前端

// luffy_city.src.components.Login.vue





// luffy_city.src.components.Header.vue




路飞项目--05_第2张图片

注册前端

// luffy_city.src.components.Rwgister.vue





// luffy_city.src.components.Header.vue




路飞项目--05_第3张图片

多方式登录前端

// luffy_city.src.components.Login.vue





登录注册前端结合

// Login.vue





// Register.vue





// Header.vue




#  登录注册组件直接引入header中就可以使用了

今日思维导图:

你可能感兴趣的:(前端,vue.js,python)