Vue实战项目之获取手机短信验证码

思路

1，先判断手机号和验证是否为空，

2，点击发送验证码，1分钟计时，得到验证码

3，输入的验证码是否为空和是否正确，

4，最后向服务发送请求

标签显示

      <el-form-item label="短信验证" prop="phoneCode" class="pr">
                <el-input style="width:400px;" placeholder="请输入您接收的短信验证码" v-model="form.phoneCode"></el-input>
                <button @click.prevent="getCode()" class="code-btn" :disabled="!show">
                  <span v-show="show">获取验证码</span>
                  <span v-show="!show" class="count">{{count}} s</span>
                </button>
          </el-form-item>

//初始值
 show: 'false',
 count: '',
//方法
 methods: {
      // 获取短信验证码
      getCode() {
        //axios请求
        console.log(this.form.phone);
        // 验证码倒计时
        if (!this.timer) {
          this.count = 60;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= 60) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },

样式

  // 短信验证码
  .pr,
   {
    position: relative;
  }

  .code-btn {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 222;
    //#ef8466橘色
    color: #409EFF;
    font-size: 14px;
    border: none;
    border-left: 1px solid #bababa;
    padding-left: 10px;
    background-color: #fff;
    //鼠标指针的样式:伸出食指的手,default 箭头，crosshair 十字，progress 箭头和沙漏
    cursor: pointer;
  }

效果显示

初始界面如下：

效果图1

获取验证码时进行倒计时效果如下：

效果图2