原生JavaScript前端短信验证码之vue实践方案，可以应用于多场景

/**

 *

 * @param {*} e 要操作的dom

 * @param {*} callBack 处理发送验证码的逻辑

 * @param {*} num 几秒后可以重新获取

 * @param {*} delay 多少秒掉一次

 */

export const sendCode = (e, callBack, num = 10, delay = 1000) => {

    var target = e.target || e.srcElement;

    let timer = null;

    target.disabled = true;

    target.innerHTML = `${num}秒后可重新获取`;

    callBack();

    timer = setInterval(() => {

        num--;

        if(num > 0) {

            target.innerHTML = `${num}秒后可重新获取`;

        }else{

            clearInterval(timer);

            target.disabled = false;

            target.innerHTML = `点击发送验证码`;

            num = num;

        }

    }, delay)

}

使用方式：

import { sendCode } from './utils.js'

<button @click="sendCodeBtn($event)">发送验证码</button>

methods: {

    sendCodeBtn(e) {

      sendCode(e, () => {

        console.log('调用后台发送验证码的接口逻辑处理')

      }, 20)

    }

  }