VUE Element UI 60秒倒计时（转载）

最新推荐文章于 2025-07-15 20:24:08 发布

夜黑风高-ysy

最新推荐文章于 2025-07-15 20:24:08 发布

阅读量5.4k

点赞数

本文介绍了一种使用Vue和Element UI实现短信倒计时重新发送功能的方法。通过设置按钮的禁用状态和文本更新，结合定时器实现倒计时效果，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   </head>

   <body>
       <el-container id='app'>
           <el-button @click="sendMsg" type="primary" :disabled="isDisabled">{{buttonName}}</el-button>
           </el-table>
       </el-container>
   </body>
   
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               buttonName: "发送短信",
               isDisabled: false,
               time: 10
           },
           methods: {
               sendMsg() {
                   let me = this;
                   me.isDisabled = true;
                   let interval = window.setInterval(function() {
                       me.buttonName = '（' + me.time + '秒）后重新发送';
                       --me.time;
                       if(me.time < 0) {
                           me.buttonName = "重新发送";
                           me.time = 10;
                           me.isDisabled = false;
                           window.clearInterval(interval);
                       }
                   }, 1000);

               }

           }

       })
   </script>

</html>