一、功能和效果展示

1.组件功能

uniapp
（1）按钮初始显示“发送”，点击按钮后按钮显示倒计时60s；
（2）倒计时60s期间点击按钮，不会重置计时器；
（3）倒计时60s结束后，按钮恢复初始状态，显示“发送”；

2.效果展示

3.核心思路

点击“发送验证码”button，即可触发getCode()
设置time=60，timer为定时器
当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒
若在timer定时器未被消除即time仍处于(0,60)范围时，点击“获取验证码”button触发的getCode()会直接return出去

getCode(){if(this.timer > 0) return//定时器timerthis.timer = null//倒计时60秒this.time = 60//每秒 time--this.timer = setInterval(()=>{this.time--if(this.time<= 0){//当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒clearInterval(this.timer)}},1000)
}

二、完整代码实现

1. 绑定手机号页面

插入code-btn组件，传递获取的手机号的值到code-btn组件。
@/pages/bind-phone.vue

<template><view class="login-form"><view>绑定手机号</view><view class="login-input"><uni-icons type="person" size="20"></uni-icons><input type="tel" placeholder="请输入手机号" v-model="form.phone" /> </view><view><uni-icons type="locked" size="20"></uni-icons><input type="password" placeholder="验证码" v-model="form.phone" />//给code-btn组件传入手机号的值<code-btn phone="form.phone"></code-btn></view><view class="button-login" @click="submitPhone">绑定</view>
</template>

2.code-btn组件

@/components/code-btn.vue

<template><view class="code-btn" @click="getCode">{{time ? time + 's':'发送'}}</view>
</template>
<script>let timer = nullexport default {name:"code-btn",props:{phone:{type:[Number, String],default:''},},data(){return {time:0};},methods:{getCode(){if(this.timer > 0) return//调用api接口，接收验证码this.$api.getCaptchat({phone:this.phone}).then(res => {//当成功获取验证码时this.time = 60this.$toast('验证码:'+res)//每秒 time--this.timer = setInterval(()=>{this.time--if(this.time<= 0){clearInterval(this.timer)}},1000)}).catch(err => {//若获取验证码失败this.$toast(err,'请稍后重试')})}},}
</script>

uniapp | 发送手机验证码 button组件相关推荐

UNIAPP实战项目笔记57 发送手机验证码接入短信SDK
UNIAPP实战项目笔记57 发送手机验证码接入短信SDK 注册时候需要发送验证通过验阿里云或腾讯云等短信sdk供应商实际案例图片后端接口文件 index.js var express = r ...
jquery发送手机验证码倒计时插件支持页面刷新
在最新项目中需要用到发送短信短信验证码,网上搜了半天找不到满意的,就自己写了一个. jquery封装好的发送手机验证码倒计时插件采用cookie 防止页面刷新. 实现思路: 1.实现点击按钮,对手机 ...
如何封装一个vue组件（获取手机验证码的组件）
如何封装一个vue组件(获取手机验证码的组件) 定义一个名为 item-time 的新组件,这是获取手机验证码的组件 Vue.component('item-time', {props: ['maxt ...
注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）
注册/找回密码等功能中发送手机验证码后倒计时效果的实现,基于vue.element-ui <template><el-button size="small" ty ...
SpringBoot+vue 使用阿里云的短信功能发送手机验证码
前言: 小编后端用的是Springboot 前端用的是vue ,小编主要是写后台,前端页面比较简陋,后期还要调优,写的不对处还望多多包涵. 环境: 需要先准备好阿里云的账号和一些必要的参数.详情见我的 ...
python按照号段生成手机号接收验证码_django 发送手机验证码的示例代码
一.流程分析: 1.用户在项目前端,输入手机号,然后点击[获取验证码],将手机号发到post到后台. 2.后台验证手机号是否合法,是否已被占用,如果通过验证,则生成验证码,并通过运行脚本,让短信运营商 ...
java实现发送手机验证码功能
1. 进入秒嘀科技(http://www.miaodiyun.com/),注册一个账号 2. 注册好之后,点击用户中心 -> 账户管理,就会进入如下界面 (顺便提一下,新注册的用户,平台会免费 ...
手机验证码平台，怎么发送手机验证码，php开发手机验证码短信接口功能
通过前面的学习, 你已经掌握怎么在腾讯短信平台上设置项目, 添加短信签名, 设置短信模板, 把手机验证码注册页面写好. 今天子恒老师来跟你分享怎么实现发送手机验证码给用户, 注意我们使用的是php开发 ...
springMVC+阿里云API = 实现发送手机验证码短信
springMVC+阿里云API = 实现发送手机验证码短信前段时间vue框架做了一个旅游APP软件,其中在用户登录APP的时候,我不仅提供了用户可以自己手动先去注册账号在进行登陆App.然后我还提 ...

uniapp | 发送手机验证码 button组件

一、功能和效果展示

1.组件功能

2.效果展示

3.核心思路

二、完整代码实现

1. 绑定手机号页面

2.code-btn组件

uniapp | 发送手机验证码 button组件相关推荐

最新文章

热门文章