html：

<el-form :model="emailForm" :rules="rules" class="elform">
          <el-form-item label="输入邮箱：" label-width="120px" prop="email">
            <el-input class="wjinputone" v-model="emailForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码：" label-width="120px" class="el-formtwo" prop="codes">
            <el-input class="wjinput" v-model="emailForm.codes" autocomplete="off"></el-input>
            <el-button type="primary" @click="getCode" :disabled="codedisObj.codeDisabled">{{codedisObj.codeMsg}}</el-button>
         </el-form-item>
</el-form>

js：

 1 private codedisObj: any = {
 2     codeDisabled: true,
 3     codeMsg: "获取短信验证码",
 4   };
 5  private timer: any = null;
 6  private countdown: number = 60;
 7  //忘记密码中校验邮箱
 8   private validateEmail: any = (rule, value, callback) => {
 9     if (value == "") {
10       callback(new Error("请输入邮箱"));
11     } else {
12       if (value != "") {
13         var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
14         if (!reg.test(value)) {
15           callback(new Error("邮箱格式输入错误"));
16           this.codedisObj.codeDisabled = true;
17         } else {
18           //手机号码输入正确时才可点击获取验证码按钮
19           this.codedisObj.codeDisabled = false;
20         }
21       }
22       callback();
23     }
24   };
25 private rules: object = {
26  codes: [
27       {
28         required: true,
29         message: "请输入验证码",
30         trigger: "blur",
31       },
32       {
33         pattern: /^[^\s]*$/,
34         message: "不能输入空格",
35         trigger: "change",
36       },
37       {
38         min: 1,
39         max: 6,
40         message: "请校对验证码的值是否填写正确",
41         trigger: "blur",
42       },
43       {
44         pattern: /^\d+$|^\d+[.]?\d+$/,
45         message: "验证码只能输入纯数字",
46         trigger: "blur",
47       },
48     ],
49  email: [
50       {
51         required: true,
52         validator: this.validateEmail,
53         trigger: "change",
54       },
55       {
56         pattern: /^[^\s]*$/,
57         message: "不能输入空格",
58         trigger: "change",
59       },
60     ],
61 }

methods：

 1  private getCode() {
 2     if (this.emailForm.email != "") {
 3       this.codedisObj.codeDisabled = true;
 4       // this.get(
 5       //   { api: "/system/user/sendEmail/" + this.emailForm.email },
 6       //   (res) => {
 7       //     if (res.code == 200) {
 8 
 9       //     }
10       //   }
11       // );
12       const Countdown = 60;
13       if (!this.timer) {
14         this.countdown == Countdown;
15         this.timer = setInterval(() => {
16           if (this.countdown > 0 && this.countdown <= 60) {
17             this.countdown--;
18             if (this.countdown !== 0) {
19               this.codedisObj.codeDisabled = true;
20               this.codedisObj.codeMsg = "重新发送(" + this.countdown + ")";
21             } else {
22               clearInterval(this.timer);
23               this.codedisObj.codeMsg = "获取短信验证码";
24               this.countdown = 60;
25               this.timer = null;
26               this.codedisObj.codeDisabled = false;
27             }
28           }
29         }, 1000);
30       }
31     } else {
32       this.codedisObj.codeDisabled = false;
33     }
34   }