密码不填充

This commit is contained in:
神仙都没用 2024-12-25 10:49:53 +08:00
parent 17f7288328
commit 8e9cc4c4ba
2 changed files with 44 additions and 54 deletions

View File

@ -13,52 +13,49 @@
<div class="form"> <div class="form">
<el-form label-position="top" class="form" :disabled="saving"> <el-form label-position="top" class="form" :disabled="saving">
<el-form-item label="用户名"> <el-form-item label="用户名">
<input <el-input
v-model="form.username" v-model="form.username"
placeholder="请输入用户名" placeholder="请输入用户名"
maxlength="20" maxlength="20"
type="text"
:readonly="readonly"
autocomplete="off"
@focus="readonly = false"
/> />
</el-form-item> </el-form-item>
<el-form-item label="密码"> <el-form-item label="密码">
<input <el-input
v-model="form.password" v-model="form.password"
type="password" type="password"
placeholder="请输入密码" placeholder="请输入密码"
maxlength="20" maxlength="20"
autocomplete="off" show-password
autocomplete="new-password"
/> />
</el-form-item> </el-form-item>
<el-form-item label="验证码"> <el-form-item label="验证码">
<div class="row"> <el-input
<input v-model="form.verifyCode"
v-model="form.verifyCode" placeholder="图片验证码"
placeholder="图片验证码" maxlength="4"
maxlength="4" @keyup.enter="toLogin"
@keyup.enter="toLogin" >
/> <template #suffix>
<pic-captcha
<pic-captcha :ref="setRefs('picCaptcha')"
:ref="setRefs('picCaptcha')" v-model="form.captchaId"
v-model="form.captchaId" @change="
@change=" () => {
() => { form.verifyCode = '';
form.verifyCode = ''; }
} "
" />
/> </template>
</div> </el-input>
</el-form-item> </el-form-item>
<div class="op"> <div class="op">
<el-button type="primary" :loading="saving" @click="toLogin" <el-button type="primary" :loading="saving" @click="toLogin">
>登录</el-button 登录
> </el-button>
</div> </div>
</el-form> </el-form>
</div> </div>
@ -77,18 +74,15 @@ import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { useCool } from '/@/cool'; import { useCool } from '/@/cool';
import { useBase } from '/$/base'; import { useBase } from '/$/base';
import PicCaptcha from './components/pic-captcha.vue';
import { storage } from '/@/cool/utils'; import { storage } from '/@/cool/utils';
import PicCaptcha from './components/pic-captcha.vue';
const { refs, setRefs, router, service, browser } = useCool(); const { refs, setRefs, router, service } = useCool();
const { user, app } = useBase(); const { user, app } = useBase();
// //
const saving = ref(false); const saving = ref(false);
//
const readonly = ref(!browser.isMini);
// //
const form = reactive({ const form = reactive({
username: storage.get('username') || '', username: storage.get('username') || '',
@ -263,41 +257,35 @@ $color: #2c3142;
padding-left: 5px; padding-left: 5px;
} }
input { .el-input {
height: 45px; height: 45px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 17px; font-size: 15px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background-color: #f8f8f8; background-color: #f8f8f8;
padding: 0 15px; padding: 0 5px;
border-radius: 6px; border-radius: 6px;
position: relative; position: relative;
box-shadow: none;
&__wrapper {
box-shadow: none;
background-color: transparent;
}
&:-webkit-autofill { &:-webkit-autofill {
box-shadow: none;
-webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset; -webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset;
box-shadow: 0 0 0 1000px #f8f8f8 inset; box-shadow: 0 0 0 1000px #f8f8f8 inset;
} }
&::placeholder {
font-size: 14px;
}
} }
}
.row { :deep(.pic-captcha) {
display: flex; position: absolute;
align-items: center; right: -5px;
width: 100%; top: 0;
position: relative;
.pic-captcha {
position: absolute;
right: 0;
top: 0;
}
}
} }
} }

View File

@ -205,7 +205,9 @@ const Upsert = useUpsert({
component: { component: {
name: 'el-input', name: 'el-input',
props: { props: {
type: 'password' type: 'password',
showPassword: true,
autocomplete: 'new-password'
} }
}, },
rules: [ rules: [