vue实现获取短信验证码

在template中加

<el-form-item  prop="phoneCode" class="pr"><el-input placeholder="短信验证码"  v-model="loginForm.username"></el-input><button @click.prevent="getShortMessageCode()"  class="code-btn" :disabled="!show"><span v-show="show">获取验证码</span><span v-show="!show" class="count">{{count}} s</span></button></el-form-item>

给 data 里面加上

show: true,
timer: 0,
count: 0

methods 里面加

// 获取短信验证码getShortMessageCode() {      //axios请求// console.log(this.form.phone);console.log(1111111111111)console.log(!this.timer)// 验证码倒计时if (!this.timer) {console.log(this.timer)this.count = 60;this.show = false;this.timer = setInterval(() => {if (this.count > 0 && this.count <= 60) {this.count--;} else {this.show = true;clearInterval(this.timer);this.timer = null;}}, 1000);}}

style 里面

/* 短信验证码css */.pr {position: relative;}.code-btn {width: 100px;height: 20px;position: absolute;top: 10px;right: 5px;z-index: 222;color: #ef8466;font-size: 14px;border: none;border-left: 1px solid #bababa;padding-left: 10px;background-color: #fff;cursor: pointer;}

vue实现获取短信验证码相关推荐

vue中获取短信验证码IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空经过排查是因为通过v-mode ...
vue中获取短信验证码功能IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空经过排查是因为通过v-mode ...
vue element-ui实现获取短信验证码 ,60秒倒计时及页面
cc废话不多说先上效果图 vue页面布局 <el-form-item prop="phoneCode" class="pr"><el-inp ...
android 获取短信验证码倒计时
android 获取短信验证码倒计时 public class MainActivity extends Activity { private Button submit; privat ...
php读取js验证码,js实现获取短信验证码实例
本文主要和大家分享js实现获取短信验证码实例,主要以代码的形式和大家分享,希望能帮助到大家.$(".form-data").delegate(".send",& ...
android-短信验证功能,Android实现获取短信验证码的功能以及自定义GUI短信验证详解...
<Android实现获取短信验证码的功能以及自定义GUI短信验证详解>由会员分享,可在线阅读,更多相关<Android实现获取短信验证码的功能以及自定义GUI短信验证详解(8页珍藏版 ...
iOS点击获取短信验证码按钮
概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细代码下载:http://www.demodashi.com ...
python短信验证码_玩转python之获取短信验证码
原标题:玩转python之获取短信验证码对于初学者,如何利用第三方python开发包发送短信验证码,下面是具体的实现和记录过程! 环境:虚拟机上centos7平台,python3.7版本: 第三方短 ...
容联云通讯php短信接口,开发中使用【容联云通信】获取短信验证码的 Javascript 接口...
开发中使用 [容联云通信]获取短信验证码的 Javascript 接口在平台应用列表添加应用. 在测试号码中绑定测试手机号码,只有这个号码能接收验证短信. 在项目中绑定配置:将控制台首页的开发者主 ...

vue实现获取短信验证码

vue实现获取短信验证码相关推荐

最新文章

热门文章