优化登录相关组件

This commit is contained in:
Hooray Hu
2024-09-06 01:45:01 +08:00
parent 76336c1111
commit 5c840a6be9
3 changed files with 9 additions and 116 deletions
+2 -41
View File
@@ -80,14 +80,14 @@ function testAccount(account: string) {
</h3>
<div>
<ElFormItem prop="account">
<ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
<ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
<template #prefix>
<SvgIcon name="i-ri:user-3-fill" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="password">
<ElInput v-model="form.password" type="password" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
<ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
<template #prefix>
<SvgIcon name="i-ri:lock-2-fill" />
</template>
@@ -131,42 +131,3 @@ function testAccount(account: string) {
</div>
</ElForm>
</template>
<style scoped>
:deep(input[type="password"]::-ms-reveal) {
display: none;
}
.el-form-item {
margin-bottom: 24px;
:deep(.el-input) {
width: 100%;
height: 48px;
line-height: inherit;
input {
height: 48px;
}
.el-input__prefix,
.el-input__suffix {
display: flex;
align-items: center;
}
.el-input__prefix {
left: 10px;
}
.el-input__suffix {
right: 10px;
}
}
}
:deep(.el-divider__text) {
white-space: nowrap;
background-color: var(--g-container-bg);
}
</style>
+4 -38
View File
@@ -70,14 +70,14 @@ function handleRegister() {
</h3>
<div>
<ElFormItem prop="account">
<ElInput v-model="form.account" placeholder="用户名" tabindex="1">
<ElInput v-model="form.account" size="large" placeholder="用户名" tabindex="1">
<template #prefix>
<SvgIcon name="i-ri:user-3-fill" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="captcha">
<ElInput v-model="form.captcha" placeholder="验证码" tabindex="2">
<ElInput v-model="form.captcha" size="large" placeholder="验证码" tabindex="2">
<template #prefix>
<SvgIcon name="i-ic:baseline-verified-user" />
</template>
@@ -87,14 +87,14 @@ function handleRegister() {
</ElInput>
</ElFormItem>
<ElFormItem prop="password">
<ElInput v-model="form.password" type="password" placeholder="密码" tabindex="3" show-password>
<ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="3" show-password>
<template #prefix>
<SvgIcon name="i-ri:lock-2-fill" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="checkPassword">
<ElInput v-model="form.checkPassword" type="password" placeholder="确认密码" tabindex="4" show-password>
<ElInput v-model="form.checkPassword" type="password" size="large" placeholder="确认密码" tabindex="4" show-password>
<template #prefix>
<SvgIcon name="i-ri:lock-2-fill" />
</template>
@@ -112,37 +112,3 @@ function handleRegister() {
</div>
</ElForm>
</template>
<style scoped>
:deep(input[type="password"]::-ms-reveal) {
display: none;
}
.el-form-item {
margin-bottom: 24px;
:deep(.el-input) {
width: 100%;
height: 48px;
line-height: inherit;
input {
height: 48px;
}
.el-input__prefix,
.el-input__suffix {
display: flex;
align-items: center;
}
.el-input__prefix {
left: 10px;
}
.el-input__suffix {
right: 10px;
}
}
}
</style>
+3 -37
View File
@@ -56,14 +56,14 @@ function handleReset() {
</h3>
<div>
<ElFormItem prop="account">
<ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
<ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
<template #prefix>
<SvgIcon name="i-ri:user-3-fill" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="captcha">
<ElInput v-model="form.captcha" placeholder="验证码" type="text" tabindex="2">
<ElInput v-model="form.captcha" size="large" placeholder="验证码" type="text" tabindex="2">
<template #prefix>
<SvgIcon name="i-ic:baseline-verified-user" />
</template>
@@ -73,7 +73,7 @@ function handleReset() {
</ElInput>
</ElFormItem>
<ElFormItem prop="newPassword">
<ElInput v-model="form.newPassword" type="password" placeholder="新密码" tabindex="3" show-password>
<ElInput v-model="form.newPassword" type="password" size="large" placeholder="新密码" tabindex="3" show-password>
<template #prefix>
<SvgIcon name="i-ri:lock-2-fill" />
</template>
@@ -90,37 +90,3 @@ function handleReset() {
</div>
</ElForm>
</template>
<style scoped>
:deep(input[type="password"]::-ms-reveal) {
display: none;
}
.el-form-item {
margin-bottom: 24px;
:deep(.el-input) {
width: 100%;
height: 48px;
line-height: inherit;
input {
height: 48px;
}
.el-input__prefix,
.el-input__suffix {
display: flex;
align-items: center;
}
.el-input__prefix {
left: 10px;
}
.el-input__suffix {
right: 10px;
}
}
}
</style>