首页 > 其他分享 >按钮倒计时

按钮倒计时

时间:2023-07-05 20:33:26浏览次数:32  
标签:60 false countDuwn codeLoading else 倒计时 按钮

 <el-button  size="default" :loading="codeLoading"  @click="getCode">
                              
                              <span v-show="!codeLoading">获取验证码</span>  
                              <span v-show="codeLoading">{{ countDuwn }}秒后重发</span>
                            </el-button>
getCode(){
        //按钮变成加载状态
        this.codeLoading=true     
        // 调用接口

        // if (true) {
          
        //    setTimeout(()=>{
        //     // 按钮回复
        //     this.codeLoading=false
 

        //   },30000)
          
        // } else {
          
        // }

        let timer=setInterval(() => {
          if (this.countDuwn>0) {
            this.countDuwn--
          }else {
            clearInterval(timer)
            this.codeLoading=false
            this.countDuwn=60
          }
        }, 1000);
      }

  

data() {
        return {
            codeLoading:false,
            countDuwn:60,}

  

标签:60,false,countDuwn,codeLoading,else,倒计时,按钮
From: https://www.cnblogs.com/xiaobaizitaibai/p/17529732.html

相关文章

  • 【快应用】ad-button按钮与加桌组件文案调试
    ​ 【关键词】体验版、文案配置、广告、加桌 【问题背景】快应用引擎版本更新到1106版本后,广告ad-button和加桌组件新增了预制文案配置,仅支持使用已有的,不再支持自定义文案。在使用最新版本的加载器进行调试的时候,设置的文案不能生效仍是显示的是默认的文案,该如何处理?代码......
  • 常用 QT 样式与方法(按钮悬浮变色,渐变色等)
    1QSS按钮悬浮效果类似于企业微信等,鼠标悬浮在某按钮上,按钮会改变背景色来达到告知用户"选中"的效果,如下图所示:可以看到其实是background有一个浅灰色,同理,我们可以在hover的时候改变按钮的background如企业微信这样的作法,或者更改按钮文字颜色。主要使用的QT函数,示......
  • 2023年6月17号英语四六级考试倒计时,这些考前准备事项一定要注意
    2023年6月全国大学英语四六级考试将于6月17日(本周六)举行,冰雪为大家总结了四六级考前及考中注意事项,供同学们参考!考试时间四级考试时间:6月17日上午9:00-11:20六级考试时间:6月17日下午15:00-17:25考前一天复习准备:记得多看错题,建议四级考生考前一天刷一套真题,六级考生考试当天早......
  • el-tree树点击全选按钮,全部展开并且全选
    先看图:代码如下://全部选中qxClick(){this.isQx=!this.isQx;//判断按钮的状态this.expandAll();if(this.isQx){console.log(this.isQx,"-------------------------------",this.datas);//设置this.$r......
  • 前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目
    前端Vue自定义精美悬浮菜单按钮fabbutton可设置按钮背景颜色菜单按钮展开条目,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13321效果图如下:cc-suspensionMenu使用方法<!--scrollShow:是否显示滑动到顶悬浮按钮 color:悬浮按钮背......
  • 前端Vue自定义精美宫格菜单按钮组件 可设置一行展示个数 可设置成九宫格 十二宫格 十
    前端Vue自定义精美宫格菜单按钮组件可设置一行展示个数可设置成九宫格十二宫格十五宫格,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13315效果图如下:cc-categoryMenu使用方法<viewclass="header">十五宫格菜单</view><!--推荐宫......
  • 关于idea 右键找不到Diagrams 按钮
    问题:idea上找不到Diagrams按钮了解决问题:File>Setting>Plugins,搜索Diagrams ,Enabled,完成。 ......
  • Android:倒计时、定时器、定时执行次数使用笔记
    原文:https://blog.csdn.net/weixin_40420578/article/details/103876900一.倒计时(3、2、1)CountDownTimer() //一共3秒,每隔1秒执行一次 CountDownTimertimer=newCountDownTimer(3000,1000){ @Override publicvoidonTick(longmillisUntilFi......
  • JupyterLab无法点击按钮、快捷键失效的解决方法
      本文介绍JupyterLab中菜单栏按钮无法点击、快捷键无法执行问题的解决办法。  近期打开JupyterLab后,发现其中菜单栏按钮无法点击,快捷键也均无法执行。如图,红框内的按钮点击均无任何反应。  为解决这一问题,首先尝试关闭VPN、浏览器代理设置等,均不奏效。随后,在搜索时看到St......
  • 倒计时
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div><inputtype="number"placeholder="请输入时间">分钟&l......