前端结束：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);// 以下为获取验证码接口实现逻辑，根据各自具体情况来};
