vue+elementui 实现60秒倒计时功能

实现代码

写两个按钮，分别是获取验证码和倒计时按钮，两个按钮绑定一个值，用来判断当前显示哪个按钮。
点击获取验证码按钮，先校验手机号输入框的信息，校验成功后使用setInterval开始60s倒计时。
html代码：

<el-form
   class="form-content"
    ref="register"
    :model="register"
    :rules="rules"
    >
    <el-form-item prop="code">
        <el-input v-model="register.code" placeholder="验证码:" style="width: 32%;margin-right: 3%;"></el-input>
        <el-button v-show="countshow" style="width: 30%;padding: 12px 0;font-size: 13px;" @click="getcode('register')">获取短信验证码</el-button>
        <el-button v-show="!countshow" style="width: 30%;padding: 12px 0;font-size: 13px;" disabled>{{count}} s</el-button>
    </el-form-item>
</el-form>

js代码：

    data () {
        return {
            countshow:true,
            count:'',
            timer:null,
        }
    },
	methods: {
		// 获取验证码
        async getcode(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                	// 手机号等用户输入的信息校验成功后，开始倒计时
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.countshow = false;
                        this.timer = setInterval(() => {
	                        if (this.count > 0 && this.count <= TIME_COUNT) {
	                        	this.count--;
	                        } else {
		                        this.countshow = true;
		                        clearInterval(this.timer);
		                        this.timer = null;
	                        }
                        }, 1000)
                    }
                    this.codesuccess() // 调用接口获取验证码
                } else {
                    return false;
                }
            });
        },
	}