Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼

第Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼inputtype="tel"placeholder="請(qǐng)輸入手機(jī)號(hào)"/

inputtype="tel"placeholder="請(qǐng)輸入驗(yàn)證碼"/

inputtype="button"v-model="codeMsg"@click="getCode":disabled="codeDisabled"/

/div

/div

/template

script

script

exportdefault{

data(){

return{

//是否禁用按鈕

codeDisabled:false,

//倒計(jì)時(shí)秒數(shù)

countdown:60,

//按鈕上的文字

codeMsg:'獲取驗(yàn)證碼',

//定時(shí)器

timer:null

methods:{

//獲取驗(yàn)證碼

getCode(){

//驗(yàn)證碼60秒倒計(jì)時(shí)

if(!this.timer){

this.timer=setInterval(()={

if(this.countdown0this.countdown=60){

this.countdown--;

if(this.countdown!==0){

this.codeMsg="重新發(fā)送("+this.countdown+")";

}else{

clearInterval(this.timer);

this.codeMsg="獲取驗(yàn)證碼";

this.countdown=60;

this.timer=null;

this.codeDisabled=false;

},1000)

/script

css（scss寫法）

style

.login{

width:100%;

height:100%;

background:#F9F9F9;

.loginHeader{

padding:010px;

background:#fff;

margin-top:20px;

overflow:hidden;

.loginBtn{

width:100%;

height:42px;

border:none;

background:#fff;

color:#444;

border-radius:4px;

outline:none;

padding-left:3px;

font-size:1.4rem;

box-sizing:border-box;

-webkit-appearance:none;

.border-bottom{

border-bottom:1pxsolid#F3F3F3;

.codeBtn{

width:63%;

height:42px;

border:none;

background:#fff;

color:#444;

border-radius:4px;

float:left;

outline:none;

padding-left:3px;

font-size:1.4rem;

box-sizing:border-box;

-webkit-appearance:none;

.getNumber{

width:35%;

height:36px;

float:right;

margin-top:3px;

border:1pxsolid#09BB07;

color:#09BB07;

backg