【无标题】

前端结束：vue+element-plus + ts
浏览器端 登录功能改造，在原来的账号密码登录的基础上新增，短信验证码登录的方式：
效果图：
1、号码输入正则校验、获取验证码之前再校验一次!

2、发送完验证码之后倒计时60秒，避免重复提交获取验证码请求

定义两个 el-tab-pane 标签，两个标签代表两种不同的登录方式（具体可参见element官方文档），该标签的name 属性需要唯一，如下贴上手机+验证码的标签内代码

<template>
  <div class="login">
    <el-tabs v-model="activeName" type="border-card" class="login-tabs">
<el-tab-pane label="手机号码登录" name="mobile">
        <el-form ref="ssoLoginRef" :model="loginForm" :rules="ssoLoginRules" class="login-form">
          <h3 class="title">通用后台管理系统</h3>
          <el-form-item v-if="tenantEnabled" prop="tenantId">
            <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
              <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
              <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
            </el-select>
          </el-form-item>
          <el-form-item prop="phonenumber">
            <el-input v-model="loginForm.phonenumber" type="text" size="large" auto-complete="off" placeholder="手机号">
              <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="smsCode">
            <el-input v-model="loginForm.smsCode" type="text" size="large" auto-complete="off" placeholder="验证码" @keyup.enter="handleLogin">
              <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
              <template v-slot:append>
                <el-button @click="sendSmsCode" type="primary" :disabled="canClick">{{ content }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      </el-tabs>
  </div>
</template>

在验证码输入框的下方面嵌入获取按钮代码：输入框和按钮就可以比较美观的贴合相接在一行上
<template v-slot:append>
                <el-button @click="sendSmsCode" type="primary" :disabled="canClick">{{ content }}</el-button>
              </template>

结合上述代码，定义的参数：
const canClick = ref(false);// 控制按钮点击
const content = ref('发送验证码');//  参数回显按钮的文本内容，不写死
const totalTime = ref(60);// 默认获取验证码按钮点击间隙为 60s
let clock: ReturnType<typeof setInterval> | null = null;// 定义60s倒计时内不可被点击对象锁

// 校验及控制，
/**
 * 获取短信验证码
 */
const sendSmsCode = () => {
  const phone = loginForm.value.phonenumber;
  const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
  if (!reg.test(phone)) {
    proxy.$modal.msgWarning('请输入正确的手机号码');
    return;
  }
  if (canClick.value) {
    return;
  }
  canClick.value = true;
  content.value = `${totalTime.value}s后重新发送`;
  clock = window.setInterval(() => {
    totalTime.value--;
    content.value = `${totalTime.value}s后重新发送`;

    if (totalTime.value < 0) {
      if (clock) {
        window.clearInterval(clock);
      }
      content.value = '发送验证码';
      totalTime.value = 60;
      canClick.value = false;
    }
  }, 1000);

//  以下为获取验证码接口实现逻辑，根据各自具体情况来

};

原文地址：https://blog.csdn.net/qq_40350405/article/details/144058639

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！