vue 前端实现手机发送验证码功能样式

最新推荐文章于 2024-02-07 17:14:57 发布

kopppo7

最新推荐文章于 2024-02-07 17:14:57 发布

阅读量207

点赞数

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/kopppo7/article/details/132697836

版权

页面结构

<el-form-item prop="code">
        <el-input
          v-model="registerForm.code"
          type="text"
          auto-complete="off"
          placeholder="请输入登录验证码"
          style="width: 180px"
        >
        </el-input>

        <span :class="{getCodeSpan: true, disabled: timer > 0}" @click="getCode">
            {{ timer > 0 ? timer + ' 秒后重新发送' : '发送验证码' }}
        </span>
      </el-form-item>

script 部分

data() {
    return {
        timer: 0, //计时器
    }
}

methods: {

   getCode() {
      if (this.timer === 0) {
        this.timer = 60;
        const interval = setInterval(() => {
          this.timer--;
          if (this.timer === 0) {
            clearInterval(interval);
          }
        }, 1000);
      }
    },

}