fix: 修复登录页闪烁问题并添加密码框自动聚焦
This commit is contained in:
parent
5f739fae13
commit
896a8d3f59
|
|
@ -40,6 +40,7 @@
|
||||||
|
|
||||||
<el-form-item v-else-if="activeTab === 'password'" key="form-password-item" prop="password">
|
<el-form-item v-else-if="activeTab === 'password'" key="form-password-item" prop="password">
|
||||||
<el-input
|
<el-input
|
||||||
|
ref="passwordInputRef"
|
||||||
v-model="loginForm.password"
|
v-model="loginForm.password"
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
type="password"
|
type="password"
|
||||||
|
|
@ -101,6 +102,7 @@ const hideTab = ref<boolean>(false)
|
||||||
// login form 实例
|
// login form 实例
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const loginFormRef = ref<FormInstance>()
|
const loginFormRef = ref<FormInstance>()
|
||||||
|
const passwordInputRef = ref()
|
||||||
const loginForm = ref({
|
const loginForm = ref({
|
||||||
email: '',
|
email: '',
|
||||||
countryCode: '+86',
|
countryCode: '+86',
|
||||||
|
|
@ -167,6 +169,11 @@ const handleLogin = async () => {
|
||||||
if (currentTab === 'phone' && loginForm.value.email !== '') {
|
if (currentTab === 'phone' && loginForm.value.email !== '') {
|
||||||
loginForm.value.email = ''
|
loginForm.value.email = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 切换到密码页后自动聚焦密码输入框
|
||||||
|
setTimeout(() => {
|
||||||
|
passwordInputRef.value?.focus()
|
||||||
|
},400)
|
||||||
}
|
}
|
||||||
// 验证密码+验证码 → 执行登录
|
// 验证密码+验证码 → 执行登录
|
||||||
else if (currentTab === 'password') {
|
else if (currentTab === 'password') {
|
||||||
|
|
@ -185,16 +192,6 @@ const handleLogin = async () => {
|
||||||
}
|
}
|
||||||
await userStore.login(loginParams)
|
await userStore.login(loginParams)
|
||||||
setStorage('device_no', deviceNo)
|
setStorage('device_no', deviceNo)
|
||||||
activeTab.value = 'email' // 重置tab
|
|
||||||
hideTab.value = false
|
|
||||||
loginForm.value = {
|
|
||||||
// 清空表单
|
|
||||||
email: '',
|
|
||||||
countryCode: '+86',
|
|
||||||
phone: '',
|
|
||||||
password: '',
|
|
||||||
code: '',
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('表单校验失败:', error)
|
console.error('表单校验失败:', error)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue