我用的是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><StatisticCountdownv-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