注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）

注册/找回密码等功能中发送手机验证码后倒计时效果的实现，基于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) => {// 将按钮设置为不可点击状态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为自己项目中调取后端发送手机验证码API的方法，返回Promise对象，实际应用需要根据各自项目API设置修改。