原生JavaScript前端短信驗(yàn)證碼之vue實(shí)踐方案，可以應(yīng)用于多場(chǎng)景

/**

?*

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

?*?@param?{*}?callBack?處理發(fā)送驗(yàn)證碼的邏輯

?*?@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?=?`點(diǎn)擊發(fā)送驗(yàn)證碼`;

????????????num?=?num;

????????}

????},?delay)

}

使用方式：

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

<button?@click="sendCodeBtn($event)">發(fā)送驗(yàn)證碼</button>

methods:?{

????sendCodeBtn(e)?{

??????sendCode(e,?()?=>?{

????????console.log('調(diào)用后臺(tái)發(fā)送驗(yàn)證碼的接口邏輯處理')

??????},?20)

????}

??}