Vue-element ui 按钮倒计时效果

最新推荐文章于 2024-08-08 08:27:35 发布

badxcat

最新推荐文章于 2024-08-08 08:27:35 发布

阅读量4.3k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/badxcat/article/details/114486686

版权

vue elementui

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<template>
  <!-- 倒计时按钮 -->
  <el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      getCode: '获取验证码',
      isGeting: false,
      count: 60,
      disable: false
    }
  },
  methods: {
    getVerifyCode () {
      var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false
          this.disable = false
          this.getCode = '获取验证码'
          this.count = 6
          clearInterval(countDown)
        } else {
          this.isGeting = true
          this.disable = true
          this.getCode = this.count-- + 's后重发'
        }
      }, 1000)
    }
  }
}
</script>

<style>
.codeGeting{
    background: #cdcdcd;
    border-color: #cdcdcd;
}
</style>