通过vue写一个按钮倒计时

        由于写的项目用到element-ui，所以用到element-ui中的标签

    <template>

                <el-button 

                :disabled="!isClickCode" 

                type="primary" 

                @click="getCode()" 

                style="margin-left:10px;">{{codeText}}</el-button>

   </template>

data部分

        codeText:'获取验证码',    //获取验证码按钮的文字

        isClickCode:true,       //是否能点击获取验证码

methods部分

        async getCode(){

      //判断phone是否为手机号的正则表达式

      let pattern = /^1[34578]\d{9}$/

      if(pattern.test(this.phone)){//手机号格式正确，进入判断

        try {

          //发送请求获取验证码

          const result = await this.$store.dispatch('getCode',this.phone)

          //将获取的验证码赋值给data中的code

          this.code = result

          //获取成功提示

          this.$message.success('验证码获取成功')

          //再次可点击的按钮时间

          let num = 60

          //开启定时器，倒计时，并将按钮变为不可用

          let timer = setInterval( () =>{

            //按钮不可用

            this.isClickCode =false

            this.codeText = num + '秒后重新获取'

            num--

            if (num <= 0) {//60s结束，可重新获取验证码

              this.codeText = '重新获取验证码'

              //按钮可用

              this.isClickCode =true

              //清除定时器

              clearInterval(timer)

            }

          }, 1000)

        } catch (error) {

          alert('错误原因：'+error.message)

        }

      }

      else{

        this.$message.error('请输入正确的手机号')

      }

    },

若仅使用功能，将vuex部分的的代码去除即可使用