首页登录注册模态框搭建

逻辑导航

1.当点击页面主页的登录/注册按钮时，弹出登录/注册模态框
2.登录/注册模态框也是一个小组件，在组件文件夹内创建对应组件
3.然后需要将该组件传到header（头部）组件内（进行相关的导入和注册）
4.

补充子传父组件语法

在子组件内

当点击子组件里的东西时，传递给父组件一个事件，父组件该事件也会执行相应的操作处理一些东西

 methods: {     close_login() {         // 子传父组件，this.$emit给父组件传递一个事件       this.$emit('close')     }, 

在父组件内

语法为@子组件传来的事件名=“父组件自己的事件名”

<Login v-if="is_login" @close="close_login" @go="put_register" @loginsuccess="login_success"/> 

登录组件

<template>     <div class="login">         <div class="box">             <i class="el-icon-close" @click="close_login"></i>             <div class="content">                 <div class="nav">                     <span :class="{active: login_method === 'is_pwd'}"                           @click="change_login_method('is_pwd')">密码登录</span>                     <span :class="{active: login_method === 'is_sms'}"                           @click="change_login_method('is_sms')">短信登录</span>                 </div>                 <el-form v-if="login_method === 'is_pwd'">                     <el-input                             placeholder="用户名/手机号/邮箱"                             prefix-icon="el-icon-user"                             v-model="username"                             clearable>                     </el-input>                     <el-input                             placeholder="密码"                             prefix-icon="el-icon-key"                             v-model="password"                             clearable                             show-password>                     </el-input>                     <el-button type="primary">登录</el-button>                 </el-form>                 <el-form v-if="login_method === 'is_sms'">                     <el-input                             placeholder="手机号"                             prefix-icon="el-icon-phone-outline"                             v-model="mobile"                             clearable                             @blur="check_mobile">                     </el-input>                     <el-input                             placeholder="验证码"                             prefix-icon="el-icon-chat-line-round"                             v-model="sms"                             clearable>                         <template slot="append">                             <span class="sms" @click="send_sms">{{ sms_interval }}</span>                         </template>                     </el-input>                     <el-button type="primary">登录</el-button>                 </el-form>                 <div class="foot">                     <span @click="go_register">立即注册</span>                 </div>             </div>         </div>     </div> </template>  <script>     export default {         name: "Login",         data() {             return {                 username: '',                 password: '',                 mobile: '',                 sms: '',                 login_method: 'is_pwd',                 sms_interval: '获取验证码',                 is_send: false,             }         },         methods: {             close_login() {                 this.$emit('close')             },             go_register() {                 this.$emit('go')             },             change_login_method(method) {                 this.login_method = method;             },             check_mobile() {                 if (!this.mobile) return;                 if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {                     this.$message({                         message: '手机号有误',                         type: 'warning',                         duration: 1000,                         onClose: () => {                             this.mobile = '';                         }                     });                     return false;                 }                 this.is_send = true;             },             send_sms() {                  if (!this.is_send) return;                 this.is_send = false;                 let sms_interval_time = 60;                 this.sms_interval = "发送中...";                 let timer = setInterval(() => {                     if (sms_interval_time <= 1) {                         clearInterval(timer);                         this.sms_interval = "获取验证码";                         this.is_send = true; // 重新回复点击发送功能的条件                     } else {                         sms_interval_time -= 1;                         this.sms_interval = `${sms_interval_time}秒后再发`;                     }                 }, 1000);             }         }     } </script>  <style scoped>     .login {         width: 100vw;         height: 100vh;         position: fixed;         top: 0;         left: 0;         z-index: 10;         background-color: rgba(0, 0, 0, 0.3);     }      .box {         width: 400px;         height: 420px;         background-color: white;         border-radius: 10px;         position: relative;         top: calc(50vh - 210px);         left: calc(50vw - 200px);     }      .el-icon-close {         position: absolute;         font-weight: bold;         font-size: 20px;         top: 10px;         right: 10px;         cursor: pointer;     }      .el-icon-close:hover {         color: darkred;     }      .content {         position: absolute;         top: 40px;         width: 280px;         left: 60px;     }      .nav {         font-size: 20px;         height: 38px;         border-bottom: 2px solid darkgrey;     }      .nav > span {         margin: 0 20px 0 35px;         color: darkgrey;         user-select: none;         cursor: pointer;         padding-bottom: 10px;         border-bottom: 2px solid darkgrey;     }      .nav > span.active {         color: black;         border-bottom: 3px solid black;         padding-bottom: 9px;     }      .el-input, .el-button {         margin-top: 40px;     }      .el-button {         width: 100%;         font-size: 18px;     }      .foot > span {         float: right;         margin-top: 20px;         color: orange;         cursor: pointer;     }      .sms {         color: orange;         cursor: pointer;         display: inline-block;         width: 70px;         text-align: center;         user-select: none;     } </style> 

注册组件

<template>     <div class="register">         <div class="box">             <i class="el-icon-close" @click="close_register"></i>             <div class="content">                 <div class="nav">                     <span class="active">新用户注册</span>                 </div>                 <el-form>                     <el-input                             placeholder="手机号"                             prefix-icon="el-icon-phone-outline"                             v-model="mobile"                             clearable                             @blur="check_mobile">                     </el-input>                     <el-input                             placeholder="密码"                             prefix-icon="el-icon-key"                             v-model="password"                             clearable                             show-password>                     </el-input>                     <el-input                             placeholder="验证码"                             prefix-icon="el-icon-chat-line-round"                             v-model="sms"                             clearable>                         <template slot="append">                             <span class="sms" @click="send_sms">{{ sms_interval }}</span>                         </template>                     </el-input>                     <el-button type="primary">注册</el-button>                 </el-form>                 <div class="foot">                     <span @click="go_login">立即登录</span>                 </div>             </div>         </div>     </div> </template>  <script>     export default {         name: "Register",         data() {             return {                 mobile: '',                 password: '',                 sms: '',                 sms_interval: '获取验证码',                 is_send: false,             }         },         methods: {             close_register() {                 this.$emit('close', false)             },             go_login() {                 this.$emit('go')             },             check_mobile() {                 if (!this.mobile) return;                 if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {                     this.$message({                         message: '手机号有误',                         type: 'warning',                         duration: 1000,                         onClose: () => {                             this.mobile = '';                         }                     });                     return false;                 }                 this.is_send = true;             },             send_sms() {                 if (!this.is_send) return;                 this.is_send = false;                 let sms_interval_time = 60;                 this.sms_interval = "发送中...";                 let timer = setInterval(() => {                     if (sms_interval_time <= 1) {                         clearInterval(timer);                         this.sms_interval = "获取验证码";                         this.is_send = true; // 重新回复点击发送功能的条件                     } else {                         sms_interval_time -= 1;                         this.sms_interval = `${sms_interval_time}秒后再发`;                     }                 }, 1000);             }         }     } </script>  <style scoped>     .register {         width: 100vw;         height: 100vh;         position: fixed;         top: 0;         left: 0;         z-index: 10;         background-color: rgba(0, 0, 0, 0.3);     }      .box {         width: 400px;         height: 480px;         background-color: white;         border-radius: 10px;         position: relative;         top: calc(50vh - 240px);         left: calc(50vw - 200px);     }      .el-icon-close {         position: absolute;         font-weight: bold;         font-size: 20px;         top: 10px;         right: 10px;         cursor: pointer;     }      .el-icon-close:hover {         color: darkred;     }      .content {         position: absolute;         top: 40px;         width: 280px;         left: 60px;     }      .nav {         font-size: 20px;         height: 38px;         border-bottom: 2px solid darkgrey;     }      .nav > span {         margin-left: 90px;         color: darkgrey;         user-select: none;         cursor: pointer;         padding-bottom: 10px;         border-bottom: 2px solid darkgrey;     }      .nav > span.active {         color: black;         border-bottom: 3px solid black;         padding-bottom: 9px;     }      .el-input, .el-button {         margin-top: 40px;     }      .el-button {         width: 100%;         font-size: 18px;     }      .foot > span {         float: right;         margin-top: 20px;         color: orange;         cursor: pointer;     }      .sms {         color: orange;         cursor: pointer;         display: inline-block;         width: 70px;         text-align: center;         user-select: none;     } </style> 

在header父组件，完成相关事件样式配置

<template>     <div class="nav">         <span @click="put_login">登录</span>         <span @click="put_register">注册</span>         <Login v-if="is_login" @close="close_login" @go="put_register" />         <Register v-if="is_register" @close="close_register" @go="put_login" />     </div> </template>  <script>     import Login from "./Login";     import Register from "./Register";     export default {         name: "Nav",         data() {             return {                 is_login: false,                 is_register: false,             }         },         methods: {             put_login() {                 this.is_login = true;                 this.is_register = false;             },             put_register() {                 this.is_login = false;                 this.is_register = true;             },             close_login() {                 this.is_login = false;             },             close_register() {                 this.is_register = false;             }         },         components: {             Login,             Register         }     } </script>  <style scoped>  </style>