1、html脚本

<div class="form">
    <div class="form-group">
        <label for="" class="mb-3 f-14">手机号</label>
        <input type="text" v-model="loginForm.mobile" class="form-control" placeholder="请输入手机号">
    </div>
    <div class="form-group">
        <label for="inputEmail4" class="mb-3 f-14">手机动态码</label>
        <div class="form-row">
            <div class="col-md-8">
                <input type="text" v-model="loginForm.code" class="form-control" placeholder="手机动态码">
            </div>
            <div class="col-md-4">
                <button id="btnCode" type="submit" class="yzm-btn w-100" :disabled="totalTime!=60" v-text="btnCodeText" @click="getLoginCode">获取验证码</button>
            </div>
        </div>
    </div>

    <div class="form-group mt-lg-5 ">
        <button type="submit" class="btn btn-primary w-100" @click="handleLoginByMobile">登录</button>
    </div>
    <div class="form-group">
        没有账号？立即<a href="reg.html" class="blue-txt f-12">注册账户> </a>
    </div>
</div>

2、vue代码

• data函数

data: function() {
    return {
        loginForm: {
            mobile: '',
            code: ''
        },
        btnCodeText: '获取验证码',
        totalTime: 60,
        codeTimer: null,
    }
},

• 发送验证码函数

getLoginCode() {
    if(!this.isMobile(this.loginForm.mobile)) {
        this.$message.error("请输入正确的手机号")
        return
    }
    // 倒计时
    this.codeTimer = window.setInterval(() => {
        this.totalTime--;
        this.btnCodeText = this.totalTime + 's后重新发送';
        console.log('getLoginCode', this.totalTime!=60);
        if (this.totalTime < 0) {
            window.clearInterval(this.codeTimer);
            this.codeTimer = null;

            this.btnCodeText = '获取验证码';
            this.totalTime = 60;
        }
    }, 1000);
    // 发送验证码
    axios.post(this.serverUrl + '/user/sendSms', {
        mobile: this.loginForm.mobile,
        code: this.loginForm.mobile
      })
      .then((res) => {
        console.log(res);
        if(res.data.code == 200) {
            this.$message.success("验证码发送成功")
        }
        else {
            this.$message.error(res.data.msg)
        }
      });
},