小程序&vue 发送验证码后冷却功能

vue

<button class="getCode" :disabled="isBtnDisable" @click="getCode">{{ codeText }}</button>

 // 组件数据
  data() {
    return {
      codeText: '获取验证码',
      isBtnDisable: false
    }
  },

 // 组件方法
  methods: {
	 // 发送验证码
    getCode() {
        let i = 60
        this.isBtnDisable = true
        let timer = setInterval(() => {
          this.codeText = i + '秒后重新获取'

          if (i === 0) {
            this.codeText = '重新获取'
            this.code = ''
            this.isBtnDisable = false
            clearInterval(timer)
          }
          i--
        }, 1000)
        let data = {
          phone: this.phone,
        }
        XXXX接口名称XXXX(data).then(res => {
          if (res.success) {
            this.$toast.success(res.data)
          } else {
            this.$toast(res.errorMessage)
          }
        })
    }
  }

小程序

<button bindtap="getCodeFn" disabled="{{isBtnDisable}}" class="getCode">{{codeText}}</button>

 data: {
 	phone:'',
    codeText: "获取验证码",
    isBtnDisable:false
  },

// 获取验证码
  async getCodeFn() {
    let i = 60;
    this.setData({
      isBtnDisable:true
    })
    let timer = setInterval(() => {
      this.setData({
        codeText: i + "秒后重新获取",
      })
      if (i === 0) {
        this.setData({
          codeText: '重新获取',
          code: " ",
          isBtnDisable:false
        })
        clearInterval(timer);
      }
      i--
    }, 1000)
    let data = {
      phone: this.data.phone,
    }
    const res = await $api.XXX接口名XXXX(data)
  },

附:标签自适应文字宽度

width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;