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”

 發送驗證碼 
 

js代码

// 驗證碼倒計時
 let deadline = ref(Date.now());
 // 倒计时完毕会变成true  也就是button 按不了 
 let verificationdisabled = ref(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