Vue+vant 实现--发送验证码实现倒计时的功能

最新推荐文章于 2024-08-21 23:00:24 发布

Hello^_^Monkey

最新推荐文章于 2024-08-21 23:00:24 发布

阅读量1.3k

点赞数

分类专栏： vue 移动端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_48010432/article/details/122279445

版权

本文介绍如何使用Vue.js和Vant组件库来实现发送验证码后的倒计时功能，通过Vant的CountDown组件，实现了从验证码发送到倒计时结束的完整过程。

摘要由CSDN通过智能技术生成

一、效果展示

二、实现步骤

1.进入vant：Vant - 轻量、可靠的移动端组件库 (gitee.io)

2.搜索CountDown 倒计时,复制如下代码

<van-count-down :time="1000 * 5" format="ss s"/>

3.核心代码


<template>
  <div>
    <van-count-down
      :time="1000 * 5"
      format="ss s"
      v-if="isDataShow"
      @finish="isDataShow = false"
    />
    <van-button size="small" native-type="button" @click="getNum" v-else>
      获取验证码
    </van-button>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      isDataShow: true
    }
  },
  methods: {
    getNum() {
      this.isDataShow = false
    }
  }
}
</script>

<style >
</style>