vue.js项目实战运用篇之抖音视频APP-第十一节： 注册登录及验证码功能

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第十一节： 注册登录及验证码功能

功能分析

在app中要实现注册及登录功能，首先思考一个问题，是在什么时候需要登录呢？使用过抖音app的都知道，在我们操作朋友、消息、我的等功能页面时，是需要登录验证的。那么我们怎么实现呢？
功能实现步骤：
1.注册、登录、验证码页面布局实现
2.绑定相关功能的登录验证

功能实现

注册页面布局及按钮动态样式

1.结构

2.页面布局及样式，代码如下：

<template>
  <div class="sign">
    <div class="sign-header">
      <span class="iconfont icon-guanbi" style="font-size: 20px" @click="back"></span>
      <span style="color: #686868 font-size: 15px"> 帮助</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 v-model="phone" @input="changeTel" type="tel" class="inp-controll"
                 placeholder="请输入手机号码">
        </div>
      </div>
      <div class="not-sign">
        <p>未注册手机号通过验证后将自动登录</p>
      </div>
      <div class="code-btn">
        <button :disabled="disabled" :class="[btnBg? 'active':'']" @click="getCode">获取短信验证码</button>
      </div>
      <div class="other">
        <router-link href="" tag="a" to="/tpsign">密码登录</router-link>
        <span @click="show">其他方式登录</span>
      </div>
    </div>
    <!--    <transition name="up">-->
    <div class="mask" v-if="showMask" @click="close">
        <div class="oauth">
          <ul>
            <li class="oauth-item">今日头条登录</li>
            <li class="oauth-item">QQ登录</li>
            <li class="oauth-item">微信登录</li>
            <li class="oauth-item">微博登录</li>
            <li class="oauth-item" @click="close">取消</li>
          </ul>
        </div>
    </div>
    <!--    </transition>-->
  </div>
</template>
<style lang="less" scoped>
  .sign {
     
    padding: 30px;
    background-color: #fff;

    .sign-header {
     
      display: flex;
      justify-content: space-between;
    }

    .sign-content {
     
      padding: 40px 10px;
      .des{
     
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 60px 0;
      }
    }

    h2 {
     
      margin: 0;