vue 发送短信验证码倒计时

最新推荐文章于 2024-06-11 07:57:19 发布

weixin_30662539

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gaomanito/p/9505816.html

本文介绍了一个基于Vue.js的自定义倒计时按钮组件实现方法。该组件用于输入框中，例如发送验证码操作，通过点击按钮触发倒计时功能，并在指定秒数后重新激活按钮。

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

引入iview.css/vue.js/iview.js

HTML:
<div id="main" class="main">
      <i-Input class="code"  size="large">
       <timer-btn slot="append" @click.native="sendCode()" :disabled="disabled" ref="btn" :second="60"></timer-btn>
      </i-Input>
  </div>

JS:
<script type="text/javascript">
  Vue.component('timerBtn', {
  template: '<i-Button :disabled="disabled || time > 0">{{ text }}</i-Button>',
  props: {
    second: {
      type: Number,
      'default': 60 
    },
    disabled: {
      type: Boolean,
      'default': false
    }
  },
  // 初始化时间
  data: function() {
    return {
      time: 0
    };
  },
  methods: {
    run: function() {
      this.time = this.second;
      this.timer();
    },
    stop: function(){
         this.time = 0;
         this.disabled = false;
    },
    timer: function() {
      if (this.time > 0) {
        this.time--;
        setTimeout(this.timer, 1000);
      }
    }
  },
  computed: {
    text: function() {
      return this.time > 0 ? this.time + 's再获取' : '获取验证码';
    }
  }
}); 



var vm = new Vue({
    el:'#main',
    data: {
      disabled: false
    },
    methods:{
        sendCode:function(){
            vm.$refs.btn.run(); //启动倒计时
            vm.disabled = false;
        }
    }
});
 </script>