文章

手写场景题

1.验证码60s冷却

 <script setup>
import { ref,computed } from 'vue'

const msg = ref('Hello World!')
const isBand= ref(true) //按钮禁用
const timer =ref(0)

const msgInfo= computed(()=>{
  if(timer.value===0){
    return "发送验证码"
  }else{
    return  `请${timer.value}秒后重试`;
  }
})
const sendCode = ()=>{
    if(isBand.value){
    timer.value=60;
    isEnugh.value=false;
    const time=setInterval(()=>{
      timer.value-=1;
      if(timer.value===0){
        clearInterval(time)
        isBand.value=true
      }
    },1000)
    }
  
}
</script>

<template>
  <input v-model="msg" />
  <button @click="sendCode" :disabled="!isEnugh">{{msgInfo}}</button>
</template>

License:  CC BY 4.0