注冊/找回密碼等功能中發(fā)送手機驗證碼后倒計時效果的實現，基于vue、element-ui

<template><el-button size="small" type="primary" :disabled="disabled" @click="getVerifyCode">{{ btnText }}</el-button> </template><script type="text/ecmascript-6"> export default {data() {return {disabled: false,btnText: '獲取驗證碼'}},methods: {getVerifyCode() {// 調用你項目獲取手機驗證碼的API,假設返回Promise對象API.getSmsCode().then((res) => {// 將按鈕設置為不可點擊狀態(tài)this.disabled = true// 60秒倒計時let time = 60let timer = setInterval(() => {if (time <= 0) {this.disabled = falsethis.btnText = '獲取驗證碼'clearInterval(timer)} else {this.btnText = time + 's'time--}}, 1000)}).catch((err) => {console.log(err.message)this.disabled = false})}} } </script><style lang="stylus" rel="stylesheet/stylus"></style> ?注：代碼中的API.getSmsCode為自己項目中調取后端發(fā)送手機驗證碼API的方法，返回Promise對象，實際應用需要根據各自項目API設置修改。 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。