通过vue写一个按钮倒计时

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

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部分的的代码去除即可使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！