admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: login page verification code

Browse Source
This commit is contained in:
pany 2022-10-13 13:10:36 +08:00
parent 358f086f07
commit b5c2b5d861
1 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/login/index.vue
View File

@ -2,7 +2,7 @@
import { reactive, ref } from "vue" import { reactive, ref } from "vue"
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
import { useUserStore } from "@/store/modules/user" import { useUserStore } from "@/store/modules/user"
import { User, Lock, Key } from "@element-plus/icons-vue" import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
import ThemeSwitch from "@/components/ThemeSwitch/index.vue" import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
import type { FormInstance, FormRules } from "element-plus" import type { FormInstance, FormRules } from "element-plus"
import { getLoginCodeApi } from "@/api/login" import { getLoginCodeApi } from "@/api/login"
@ -61,6 +61,7 @@ const createCode = () => {
// 先清空验证码的输入 // 先清空验证码的输入
loginForm.code = "" loginForm.code = ""
// 获取验证码 // 获取验证码
codeUrl.value = ""
getLoginCodeApi().then((res: any) => { getLoginCodeApi().then((res: any) => {
codeUrl.value = res.data codeUrl.value = res.data
}) })
@ -109,10 +110,18 @@ createCode()
:prefix-icon="Key" :prefix-icon="Key"
maxlength="7" maxlength="7"
size="large" size="large"
/> >
<span class="show-code"> <template #append>
<img :src="codeUrl" @click="createCode" /> <el-image :src="codeUrl" @click="createCode" draggable="false">
</span> <template #placeholder>
<el-icon><Picture /></el-icon>
</template>
<template #error>
<el-icon><Loading /></el-icon>
</template>
</el-image>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin"> 登 录 </el-button> <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin"> 登 录 </el-button>
</el-form> </el-form>
@ -151,16 +160,16 @@ createCode()
} }
.content { .content {
padding: 20px 50px 50px 50px; padding: 20px 50px 50px 50px;
.show-code { :deep(.el-input-group__append) {
position: absolute; padding: 0;
right: 0px; overflow: hidden;
top: 0px; .el-image {
cursor: pointer;
user-select: none;
img {
width: 100px; width: 100px;
height: 40px; height: 40px;
border-radius: 4px; border-left: 0px;
user-select: none;
cursor: pointer;
text-align: center;
} }
} }
.el-button { .el-button {