ant 倒计时 发送验证码倒计时

 我用的是vue3 setup 语法糖 夹杂点ts  

一开始是刷新了一下

首先先引入

import { Statistic } from "ant-design-vue";
const StatisticCountdown = Statistic.Countdown;

html 代码

Button 标签  1.点击后 方法

                     2 禁用 效果

StatisticCountdown：

                是按需引入 不懂的看之前文章

                v-if   这个判断 为true 也就是 botton禁用后就出现

                :value 是 倒计时的数

                @finish  倒计时结束后触发

                format 可以是 “D 天 H 时 m 分 s 秒” 也可以是 “HH:mm:ss:SSS”

<Button
  @click="smssend()"
  :disabled="verificationdisabled"
>
  <Row>
    <Col> 發送驗證碼 </Col>
    <Col>
      <StatisticCountdown
        v-if="verificationdisabled"
        :value="deadline"
        style="margin-top: -8px; margin-left: 10px"
        @finish="verificationdisabled = flase"
        format="ss"
      />
    </Col>
  </Row>
</Button>

js代码

// 驗證碼倒計時
let deadline = ref(Date.now());
// 倒计时完毕会变成true  也就是button 按不了 
let verificationdisabled = ref<boolean>(false);
//按钮点击后
const smssend = () => {
      verificationdisabled.value = true;// 点击后要把button锁住
      deadline.value = Date.now() + 3 * 1000;
      //点击后 要给倒计时组件一个数 3 * 1000 就是3秒
    
};

官网参考： https://2x.antdv.com/components/statistic-cn/#API

我的按需引入教程： (1条消息) ant 使用安装 按需加载_Sengoku_Xingzi的博客-CSDN博客_ant npm