vue 倒计时 获取验证码效果

效果：

 代码：

<template>
    <div>
      <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
    </div>
</template>

 <script>
export default {
        data() {
            return {
                disabled:false,
                time:5,
                btntxt:"发送验证码",
            };
        },
        methods: {
            sendcode(){
                this.time=5;
                this.timer();   
            },
            //发送手机验证码倒计时
            timer() {
                if (this.time > 0) {
                    this.disabled=true;
                     this.time--;
                     this.btntxt=this.time+"秒";
                     setTimeout(this.timer, 1000);
                } else{
                     this.time=0;
                     this.btntxt="发送验证码";
                     this.disabled=false;
                }
            },
        }
}
</script>

<style scoped>
.el-button{
    margin: 100px 50px;
}
</style>