vue 获取验证码按钮，点击后开始倒计时

第一步

data() {return {disableCode: false,getCode: this.$t('login.obtaining'), // 按钮显示的内容isGeting: false,count: 60}},

第二步

<el-buttonclass="validateImg"type="primary":disabled="disableCode":class="{ codeGeting:isGeting }"@click.stop="getVerifyCode"
>{{ getCode }}</el-button>

第三步

// 点击按钮倒计时getVerifyCode() {var countDown = setInterval(() => {if (this.count < 1) {this.isGeting = falsethis.disableCode = falsethis.getCode = this.$t('login.obtaining')this.count = 60clearInterval(countDown)} else {this.isGeting = truethis.disableCode = truethis.getCode = this.count-- + 's' + this.$t('login.resend')}}, 1000)},

vue 获取验证码按钮，点击后开始倒计时相关推荐

获取验证码按钮点击后开始倒计时
<script src="/jquery-2.1.4.min.js"></script>  <li ...
获取验证码按钮点击后，一分钟内不可继续点击
1 <input type="button" id="btn" value="免费获取验证码" /> 2 <script ...
ElementUI+VUE获取验证码前端代码
本期带来vue项目的获取验证码按钮以及一个定时任务可以和我上期发的SpringBoot项目发现验证码一起配合使用 vue + elementUI项目使用 1.首先是前端的方法部分 send () { ...
注册登录时，在点击获取验证码按钮后，改变按钮状态
按钮首先是获取验证码的按钮: <div class="layui-form-item"><label for="phoneCode" cla ...
vue 获取验证码倒计时组件
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template><div class="captcha-row" ...
Vue 获取验证码60s倒计时方法
HTML: <div class="item"><input type="text" v-model="phone" pl ...
JavaScript获取验证码，60秒倒计时方法
html <div class="item-input code-box"><input type="text" class="us ...
uni app input添加获取验证码按钮_uni-app跨平台框架对微信小程序的无障碍支持探索...
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝).快应用等多个平台. ...
uni app input添加获取验证码按钮_FILEX | 如何在UniSwap挖到UNI？
终于,UniSwap的币上线了,不过这一次不是直接通过挖矿获得,而是先给所有此前参加过UniSwap流动性挖矿和交易的用户分发了红利. 其中最少的账户拿到400个UNI左右,而提供流动性的账户获得的U ...

vue 获取验证码按钮，点击后开始倒计时

vue 获取验证码按钮，点击后开始倒计时相关推荐

最新文章

热门文章