Vue.js 实战系列之实现视频类WebApp的项目开发——11. 手机号登录、密码登录、其它方式登录的实现

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

实现效果

---

功能实现

1. 设置路由跳转登录页面

   src/router/index.js

   在原有基础上新增以下代码片段：

   {
          
       path: '/sign',
       name: 'Sign',
       component: () => import(/* webpackChunkName: "sign" */ '../views/Sign.vue'),
   },
   

2. 新建 Sign.vue 文件，基本实现登录页面

   views 目录下新建 Sign.vue 文件

   <template>
     <div class="sign">
       <div class="sign-header">
         <span class="iconfont icon-guanbi" style="font-size: 30px">span>
         <span style="color: #686868"> 帮助span>
       div>
       <div class="sign-content">
         <div class="des">
           <h2>登录后即可展示自己h2>
           <p>已阅读并同意<a>用户协议a>和<a>隐私政策a>p>
         div>
       div>
       <div class="sign-box">
         <div class="sele">
           <select class="sele-controll" v-model="telErea">
             <option value="">+86option>
           select>
         div>
         <em />
         <div class="inp">
           <input placeholder="请输入手机号码" class="inp-controll"/>
         div>
       div>
       <div class="not-sign">
         <p>未注册的手机号验证通过后将自动注册p>
       div>
       <div class="code-btn">
         <button>获取短信验证码button>
       div>
       <div class="other">
         <router-link href="" tag="a">密码登录router-link>
         <a>其他方式登录a>
       div>
     div>
   template>
   
   <style lang="less" scoped>
   .sign {
           
     padding: 30px;
     background: #fff;
     .sign-header {
           
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 18px;
     }
     .sign-content {
           
       padding: 40px 10px;
       h2 {
           
         margin: 0;
         font-size: 22px;
         font-weight: bold;
       }
       p {
           
         font-size: 14px;
         line-height: 20px;
         color: #686868;
       }
       p a {
           
         color: #3d79b4;
         text-decoration: none;
         font-weight: 600;
         padding: 0 5px;
       }
     }
     .sign-box {
           
       display: flex;
       height: 50px;
       margin: 20px 0 0 0;
       align-items: center;
       background-color: #f9f9f9;
       .sele-controll {
           
         height: 36px;
         font-weight: bold;
         margin-left: 5px;
         font-size: 16px;
         border: none;
         background-color: #f9f9f9;
         width: 60px;
         outline: none;
       }
       .inp {
           
         height: 36px;
         width: 90%;
         margin-left: 10px;
         .inp-controll{
           
           caret-color: #fe2c55;
           height: 36px;
           background-color: #f9f9f9;
           width: 90%;
           font-size: 16px;
           border: none;
           outline: none;
         }
       }
       em {
           
         border-left: 1px solid #ddd;
         height: 12px;
         margin-left: 10px;
         line-height: 15px;
         box-shadow: 1px 1px 1px #eeeeee;
       }
     }
     .not-sign {
           
       margin-top: 10px;
       p {
           
         color: #b9b9b9;
         font-size: 14px;
       }
     }
     .code-btn button {
           
       margin: 10px 0;
       width: 100%;
       padding: 15px 0;
       border: none;
       letter-spacing: 1px;
       font-size: 17px;
       color: #fff;
       font-weight: 600;
       background: #dbdbdb;
       border-radius: 2px;
     }
     .other {
           
       display: flex;
       justify-content: space-between;
       font-size: 16px;
       margin-top: 10px;
       a {
           
         color: #3d79b4;
         text-decoration: none;
         font-weight: 600;
       }
     }
   }
   style>
   

   实现效果：
   

3. 登录页面功能完善

   1. 监听文本框的输入并对其正则表达式(手机号)格式验证

   ...
   <template>
   	<div class="sign-box">
         <div class="sele">
           <select class="sele-controll" v-model="telErea">
             <option value="+86">+86option>
           select>
         div>
         <em />
         <div class="inp">
           <input
             v-model="tel"
             @input="changeTel"
             type="tel"
             class="inp-controll"
             placeholder="请输入手机号码"
           />
         div>
       div>
       ...
       <div class="code-btn">
         <button
           :disabled="disabled"
           :class="btnBg ? 'active' : ''"
           @click="getCode"
         >
           获取短信验证码
         button>
       div>
   template>
   
   <script>
   export default {
           
       data() {
           
           return {
           
               telErea: '+86',  // 号码所属地
               tel: '',  // 手机号  v-model 双向数据绑定
               btnBg: false,  // 用于‘获取短信验证码’按钮动态样式处理
               disabled: true,  // 获取短信验证码按钮是否可用
           };
       },
       methods: {
           
           changeTel(e) {
           
               this.tel = e.target.value;
               console.log(this.tel);
               const regTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
               if (regTel.test(this.tel)) {
           
                   console.log('符合正则表达式');
                   this.btnBg = true;
                   this.disabled = false;
               } else {
           
                   console.log('不符合正则表达式');
                   this.btnBg = false;
                   this.disabled = true;
               }
           },
           getCode() {
           
               console.log('获取验证码');
           },
       },
   };
   script>
   
   <style lang="less" scoped>
   .code-btn {
           
       button {
           
         margin: 10px 0;
         width: 100%;
         padding: 15px 0;
         border: none;
         letter-spacing: 1px;
         font-size: 17px;
         color: #fff;
         font-weight: 600;
         background: #dbdbdb;
         border-radius: 2px;
       }
       .active {
           
         color: #ffffff;
         background-color: #fe2c55;
       }
   }
   style>
   

   实现效果：
   

   2. 实现更多登录方式模态窗口弹出动画

      与 评论模块弹出动画类似，使用 transition 来实现。

      <template>
      	<div class="other">
            <router-link href="" tag="a" to="/tpsign">密码登录router-link>
            <a @click="show">其他方式登录a>
          div>
          <transition name="up">
            <div class="mask" v-if="showMask" @click="close">
              <div class="oauth">
                <ul>
                  <li class="oauth-item">
                    <img src="@/assets/images/icon/tt.png" alt="" />
                    <span>今日头条登录span>
                  li>
                  <li class="oauth-item">
                      <img src="@/assets/images/icon/QQ.png" alt="" />
                      <span>QQ登录span>
                  li>
                  <li class="oauth-item">
                      <img src="@/assets/images/icon/wx.png" alt="" />
                      <span>微信登录span>
                  li>
                  <li class="oauth-item">
                      <img src="@/assets/images/icon/wb.png" alt="" />
                      <span>微博登录span>
                  li>
                  <li class="quxiao" @click="close">取消li>
                ul>
              div>
            div>
          transition>
        div>
      template>
      
      <script>
      export default {
                
          data() {
                
              return {
                
                  // 是否显示其它登录方式
                  showMask: false,
              };
          },
          methods: {
                
              show() {
                
                  this.showMask = true;
              },
              close() {
                
                  this.showMask = false;
              },
          },
      };
      script>
      
      <style lang="less" scoped>
      .mask {
                
          width: 100%;
          height: 100%;
          position: fixed;
          left: 0;
          top: 0;
          background-color: rgba(0, 0, 0, 0.4);
          .oauth {
                
            height: 46%;
            width: 100%;
            position: absolute;
            bottom: 0;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: #fff;
            text-align: center;
            font-size: 16px;
            ul {
                
              width: 100%;
              text-align: center;
              padding-left: 0;
              margin-top: 0;
              .oauth-item {
                
                width: 100%;
                list-style: none;
                border-bottom: 1px solid #ebebeb;
                line-height: 65px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                
                  width: 25px;
                  height: 25px;
                  margin-right: 10px;
                }
              }
              .quxiao {
                
                  border-top: 5px solid #ebebeb;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  min-height: 70px;
              }
            }
          }
        }
      }
      .up-enter-active, .up-leave-active {
                
        transition: all 0.3s;
      }
      .up-enter, .up-leave-to {
                
        opacity: 1;
        transform: translateY(100%);
      }
      style>
      

      实现效果：
      

---

总结

本章节需要注意的几个点：

• vue 中动态样式实现
  • vue中实现动态样式的核心是使用 v-bind 指令绑定我们的样式，进而根据不同的条件渲染不同的结果；
  • 比如：:class = btnBg ? 'active' : ' '
• 登录页面实现
  • 注意路由的跳转
• 密码登录与手机号登录页面实现方式类似，这里就不展开介绍了。

---

上一章节： 10. 本地mock数据实现数据请求

下一章节： 12. 引入Vuex实现数据管理以及登录流程的实现

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

---

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。