关于vue实现验证码倒计时功能

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;
            }
        }