区块链技术博客
www.b2bchain.cn

vue实战 实现视频类webapp:(十四) 实现验证码登录、手机号登录、其它登录方式求职学习资料

本文介绍了vue实战 实现视频类webapp:(十四) 实现验证码登录、手机号登录、其它登录方式求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

仓库传送门

本节包含如下内容:

  • vue 中动态样式实现
  • 登录页面实现
  • vue 公共样式处理
  • vue 组件化拆分路由

验证码登录、手机号登录,这两个页面除了UI布局不就一样,其它都是一样的 就不带着各位实现了 具体的实现可以看仓库

*## 最后实现的效果
vue实战 实现视频类webapp:(十四) 实现验证码登录、手机号登录、其它登录方式

vue中动态样式实现

vue中实现动态样式的核心是使用v-bind指令绑定我们的样式,进而根据不同的条件渲染不同的结果

  • :class=[btnBg? ‘active’: ”]
    实现动态样式的相关链接

登录页面实现

  • src/router/index.js 新增一个路由 用于跳转到登录界面
    javascript { path: '/sign', name: 'Sign', component: () => import(/* webpackChunkName: "sign" */ '../views/Sign'), },
  • view 目录下新建Sign.vue文件
<template>   <div class="sign">     <div class="sign-header">       <span class="iconfont icon-guanbi" style="font-size: 20px"></span>       <span style="color: #686868"> 帮助</span>     </div>     <div class="sign-content">       <div class="des">         <h2>登录后可展示自己</h2>         <p> 登录后表明同意<a href="">抖音协议</a>和<a>隐私协议</a></p>       </div>       <div class="sign-box">         <div class="sele">           <select class="sele-controll" v-model="telErea">             <option value="">+86</option>           </select>         </div>         <div class="inp">           <input  placeholder="请输入手机号码">         </div>       </div>       <div class="not-sign">         <p>未注册手机号通过验证后将自动登录</p>       </div>       <div class="code-btn">         <button >获取短信验证码</button>       </div>       <div class="other">         <router-link href="" tag="a" to="/tpsign">密码登录</router-link>         <span @click="show">其他方式登录</span>       </div>     </div>   </div> </template>  <script> export default {   name: 'Sign',   data() {     return {       telErea: '',       showMask: false,       disabled: true,       btnBg: false,       phone: '  ',     };   }, }; </script>  <style lang="less" scoped>   .sign {     padding: 30px;     background-color: #fff;      .sign-header {       display: flex;       justify-content: space-between;     }      .sign-content {       padding: 40px 10px;     }      h2 {       margin: 0;       font-size: 24px;       font-weight: bold;     }      p {       line-height: 20px;       color: #686868;     }      p a {       color: #628DB8;       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;         border: none;       }        .inp-controll {         height: 36px;         background-color: #F9F9F9;         width: 90%;         margin-left: 10px;       }        input {         caret-color: #FE2C55;       }        input::-webkit-input-placeholder {         color: #686868;       }     }      .not-sign {       margin-top: 10px;     }      .not-sign p {       color: #686868;       font-size: 14px;      }      .code-btn button {       margin: 10px 0;       width: 100%;       padding: 15px 0;       border: none;       letter-spacing: 5px;       font-size: 15px;     }      .active {       color: #ffffff;       background-color: #FE2C55;     }      .other {       display: flex;       justify-content: space-between;     }      .other a {       color: #628DB8;     }   }    .mask {     width: 100%;     height: 100%;     position: fixed;     left: 0;     top: 0;     background-color: rgba(0, 0, 0, .4);      .oauth {       height: 48%;       width: 100%;       position: absolute;       bottom: 0;       border-top-left-radius: 10px;       border-top-right-radius: 10px;       background-color: #fff;       text-align: center;        .oauth-item {         border-bottom: 1px solid #f5f5f5;         line-height: 60px;       }     }   }      /* 其它登录方式 */   .up-enter-active, .up-leave-active {     transition: all .5s;   }   .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {     opacity: 1;     transform: translateY(100%);   } </style>

vue的v-modal 属性 监听文本框的输入并对其正则表达式(手机号)格式验证

  • input标签做事件绑定
    “` javascript

仓库传送门

本节包含如下内容:

  • vue 中动态样式实现
  • 登录页面实现
  • vue 公共样式处理
  • vue 组件化拆分路由

验证码登录、手机号登录,这两个页面除了UI布局不就一样,其它都是一样的 就不带着各位实现了 具体的实现可以看仓库

*## 最后实现的效果
vue实战 实现视频类webapp:(十四) 实现验证码登录、手机号登录、其它登录方式

vue中动态样式实现

vue中实现动态样式的核心是使用v-bind指令绑定我们的样式,进而根据不同的条件渲染不同的结果

  • :class=[btnBg? ‘active’: ”]
    实现动态样式的相关链接

登录页面实现

  • src/router/index.js 新增一个路由 用于跳转到登录界面
    javascript { path: '/sign', name: 'Sign', component: () => import(/* webpackChunkName: "sign" */ '../views/Sign'), },
  • view 目录下新建Sign.vue文件
<template>   <div class="sign">     <div class="sign-header">       <span class="iconfont icon-guanbi" style="font-size: 20px"></span>       <span style="color: #686868"> 帮助</span>     </div>     <div class="sign-content">       <div class="des">         <h2>登录后可展示自己</h2>         <p> 登录后表明同意<a href="">抖音协议</a>和<a>隐私协议</a></p>       </div>       <div class="sign-box">         <div class="sele">           <select class="sele-controll" v-model="telErea">             <option value="">+86</option>           </select>         </div>         <div class="inp">           <input  placeholder="请输入手机号码">         </div>       </div>       <div class="not-sign">         <p>未注册手机号通过验证后将自动登录</p>       </div>       <div class="code-btn">         <button >获取短信验证码</button>       </div>       <div class="other">         <router-link href="" tag="a" to="/tpsign">密码登录</router-link>         <span @click="show">其他方式登录</span>       </div>     </div>   </div> </template>  <script> export default {   name: 'Sign',   data() {     return {       telErea: '',       showMask: false,       disabled: true,       btnBg: false,       phone: '  ',     };   }, }; </script>  <style lang="less" scoped>   .sign {     padding: 30px;     background-color: #fff;      .sign-header {       display: flex;       justify-content: space-between;     }      .sign-content {       padding: 40px 10px;     }      h2 {       margin: 0;       font-size: 24px;       font-weight: bold;     }      p {       line-height: 20px;       color: #686868;     }      p a {       color: #628DB8;       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;         border: none;       }        .inp-controll {         height: 36px;         background-color: #F9F9F9;         width: 90%;         margin-left: 10px;       }        input {         caret-color: #FE2C55;       }        input::-webkit-input-placeholder {         color: #686868;       }     }      .not-sign {       margin-top: 10px;     }      .not-sign p {       color: #686868;       font-size: 14px;      }      .code-btn button {       margin: 10px 0;       width: 100%;       padding: 15px 0;       border: none;       letter-spacing: 5px;       font-size: 15px;     }      .active {       color: #ffffff;       background-color: #FE2C55;     }      .other {       display: flex;       justify-content: space-between;     }      .other a {       color: #628DB8;     }   }    .mask {     width: 100%;     height: 100%;     position: fixed;     left: 0;     top: 0;     background-color: rgba(0, 0, 0, .4);      .oauth {       height: 48%;       width: 100%;       position: absolute;       bottom: 0;       border-top-left-radius: 10px;       border-top-right-radius: 10px;       background-color: #fff;       text-align: center;        .oauth-item {         border-bottom: 1px solid #f5f5f5;         line-height: 60px;       }     }   }      /* 其它登录方式 */   .up-enter-active, .up-leave-active {     transition: all .5s;   }   .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {     opacity: 1;     transform: translateY(100%);   } </style>

vue的v-modal 属性 监听文本框的输入并对其正则表达式(手机号)格式验证

  • input标签做事件绑定
    “` javascript

仓库传送门

本节包含如下内容:

  • vue 中动态样式实现
  • 登录页面实现
  • vue 公共样式处理
  • vue 组件化拆分路由

验证码登录、手机号登录,这两个页面除了UI布局不就一样,其它都是一样的 就不带着各位实现了 具体的实现可以看仓库

*## 最后实现的效果
vue实战 实现视频类webapp:(十四) 实现验证码登录、手机号登录、其它登录方式

vue中动态样式实现

vue中实现动态样式的核心是使用v-bind指令绑定我们的样式,进而根据不同的条件渲染不同的结果

  • :class=[btnBg? ‘active’: ”]
    实现动态样式的相关链接

登录页面实现

  • src/router/index.js 新增一个路由 用于跳转到登录界面
    javascript { path: '/sign', name: 'Sign', component: () => import(/* webpackChunkName: "sign" */ '../views/Sign'), },
  • view 目录下新建Sign.vue文件
<template>   <div class="sign">     <div class="sign-header">       <span class="iconfont icon-guanbi" style="font-size: 20px"></span>       <span style="color: #686868"> 帮助</span>     </div>     <div class="sign-content">       <div class="des">         <h2>登录后可展示自己</h2>         <p> 登录后表明同意<a href="">抖音协议</a>和<a>隐私协议</a></p>       </div>       <div class="sign-box">         <div class="sele">           <select class="sele-controll" v-model="telErea">             <option value="">+86</option>           </select>         </div>         <div class="inp">           <input  placeholder="请输入手机号码">         </div>       </div>       <div class="not-sign">         <p>未注册手机号通过验证后将自动登录</p>       </div>       <div class="code-btn">         <button >获取短信验证码</button>       </div>       <div class="other">         <router-link href="" tag="a" to="/tpsign">密码登录</router-link>         <span @click="show">其他方式登录</span>       </div>     </div>   </div> </template>  <script> export default {   name: 'Sign',   data() {     return {       telErea: '',       showMask: false,       disabled: true,       btnBg: false,       phone: '  ',     };   }, }; </script>  <style lang="less" scoped>   .sign {     padding: 30px;     background-color: #fff;      .sign-header {       display: flex;       justify-content: space-between;     }      .sign-content {       padding: 40px 10px;     }      h2 {       margin: 0;       font-size: 24px;       font-weight: bold;     }      p {       line-height: 20px;       color: #686868;     }      p a {       color: #628DB8;       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;         border: none;       }        .inp-controll {         height: 36px;         background-color: #F9F9F9;         width: 90%;         margin-left: 10px;       }        input {         caret-color: #FE2C55;       }        input::-webkit-input-placeholder {         color: #686868;       }     }      .not-sign {       margin-top: 10px;     }      .not-sign p {       color: #686868;       font-size: 14px;      }      .code-btn button {       margin: 10px 0;       width: 100%;       padding: 15px 0;       border: none;       letter-spacing: 5px;       font-size: 15px;     }      .active {       color: #ffffff;       background-color: #FE2C55;     }      .other {       display: flex;       justify-content: space-between;     }      .other a {       color: #628DB8;     }   }    .mask {     width: 100%;     height: 100%;     position: fixed;     left: 0;     top: 0;     background-color: rgba(0, 0, 0, .4);      .oauth {       height: 48%;       width: 100%;       position: absolute;       bottom: 0;       border-top-left-radius: 10px;       border-top-right-radius: 10px;       background-color: #fff;       text-align: center;        .oauth-item {         border-bottom: 1px solid #f5f5f5;         line-height: 60px;       }     }   }      /* 其它登录方式 */   .up-enter-active, .up-leave-active {     transition: all .5s;   }   .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {     opacity: 1;     transform: translateY(100%);   } </style>

vue的v-modal 属性 监听文本框的输入并对其正则表达式(手机号)格式验证

  • input标签做事件绑定
    “` javascript

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue实战 实现视频类webapp:(十四) 实现验证码登录、手机号登录、其它登录方式求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们