template
<div class="keyCode">
<el-input
key="registerKeyCode"
placeholder="请输入验证码"
v-model="keyCode">
<i slot="prefix" class="el-input__icon iconfont icon-anquan"></i>
</el-input>
<el-button round @click="sendMsg"
:disabled="isDisabled" size="small">{{buttonName}}</el-button>
</div>
js
export default {
data() {
return {
keyCode: null, //验证码
buttonName: "获取验证码",
isDisabled: false,//验证码再次发送
}
},
methods: {
//发送短信
sendMsg() {
let me = this;
me.isDisabled = true;
let interval = window.setInterval(function () {
me.buttonName = '重新发送(' + me.time + 's)';
--me.time;
if (me.time < 0) {
me.buttonName = "获取验证码";
me.time = 10;//10s
me.isDisabled = false;
window.clearInterval(interval);
}
}, 1000);
},
}
}
css
不具有通用意义
.keyCode {
font-size: 12px;
.el-input {
width: 130px !important;
margin-right: 13px;
}
.el-button {
padding: 3px 3px;
color: #3E82E8;
border-color: #3E82E8;
}
.is-disabled {
color: #DCDFE6;
border-color: #DCDFE6;
}
}