feat: 登录框加上验证码

meadmin-cn · Aug 26, 2022 · 3273dfb · 3273dfb
1 parent 7905fb8
commit 3273dfb
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/src/api/user.ts b/src/api/user.ts
@@ -9,6 +9,7 @@ const enum Api {
 export class LoginParams {
   username = '';
   password = '';
+  captcha = '';
 }
 export interface LoginResult {
   token: string;

diff --git a/src/assets/images/captcha.png b/src/assets/images/captcha.png
diff --git a/src/locales/lang/en/default.json b/src/locales/lang/en/default.json
@@ -4,7 +4,9 @@
   "请填写": "Please input",
   "用户名": "Username",
   "密码": "Password",
+  "验证码": "Captcha",
   "长度必须在 {0} 到 {1}个字符之间": "Length should be {0} to {1}",
+  "长度必须为 {0} 个字符": "Length should be {0}",
   "项目配置": "Theme Config",
   "主题色": "Theme Color",
   "侧边栏背景色": "Sidebar Background",

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -22,7 +22,14 @@
             show-password
           />
         </el-form-item>
-        <el-button class="sub" type="primary" @click="login">{{ t('登录') }}</el-button>
+        <el-form-item prop="captcha">
+          <el-input v-model="loginParams.captcha" :placeholder="t('验证码') + '(任意填写即可)'" clearable>
+            <template #append>
+              <img src="@/assets/images/captcha.png" class="captcha" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-button class="submit" type="primary" @click="login">{{ t('登录') }}</el-button>
       </el-form>
     </div>
   </div>
@@ -66,6 +73,18 @@ const rules = computed<FormRules>(() => ({
       trigger: 'blur',
     },
   ],
+  captcha: [
+    {
+      required: true,
+      message: t('请填写') + ' ' + t('验证码'),
+      trigger: 'blur',
+    },
+    {
+      len: 4,
+      message: t('验证码') + ' ' + t('长度必须为 {0} 个字符', [4]),
+      trigger: 'blur',
+    },
+  ],
 }));
 
 const login = async () => {
@@ -132,8 +151,24 @@ const login = async () => {
       font-size: 1.6rem;
       font-weight: bold;
     }
+    :deep(.el-input) {
+      .captcha {
+        margin: 0 -19px;
+        height: calc(var(--el-component-size) - 2px);
+      }
+    }
+    :deep(.el-input--large) {
+      .captcha {
+        height: calc(var(--el-component-size-large) - 2px);
+      }
+    }
 
-    .sub {
+    :deep(.el-input--small) {
+      .captcha {
+        height: calc(var(--el-component-size-small) - 2px);
+      }
+    }
+    .submit {
       width: 100%;
       margin: auto;
       display: block;