vue3中使用异步函数生成验证码倒计时

为了防止通过网页频繁调取后台接口，可以加入倒计时限制

<el-button
    link
    v-if="!img.isCode"
    @click="sendCode"
>重新获取验证码</el-button>

<el-button
    style="margin-left: 30px"
    link
    v-if="img.isCode"
>{{ img.codeTime }}s</el-button>

//初始时间，和倒计时模块是否显示
const img = reactive({
   imgUrl : '/api/user/imgCode',
   codeTime: 60,
   isCode: false
})
let clear = null
//异步函数
const sendCode = async () => {
  img.isCode = true
  img.imgUrl = '/api/user/imgCode?time=' +new Date()
  clear= setInterval(() => {
    // 每次时间 -1
    img.codeTime--;
    // 时间=0时 清除定时器
    if (img.codeTime === 0) {
      //清除定时器
      clearInterval(clear);
      // 还原 倒计时60s
      img.codeTime = 60;
      img.isCode = false
    }
  }, 1000);
}