fix: 1.修复【个人中心】页面在英语环境下字段名过长被换行展示导致错位;2.修复【个人中心】页面【修改密码】校验失效。

This commit is contained in:
baayso 2023-08-17 21:35:58 +08:00
parent a3f2a01eb0
commit e4592442ed
2 changed files with 14 additions and 9 deletions

View File

@ -1,5 +1,5 @@
<template>
<Form ref="formRef" :labelWidth="80" :rules="rules" :schema="schema">
<Form ref="formRef" :labelWidth="200" :rules="rules" :schema="schema">
<template #sex="form">
<el-radio-group v-model="form['sex']">
<el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
@ -7,8 +7,10 @@
</el-radio-group>
</template>
</Form>
<XButton :title="t('common.save')" @click="submit()" />
<XButton :title="t('common.reset')" type="danger" @click="init()" />
<div style="text-align: center">
<XButton :title="t('common.save')" type="primary" @click="submit()" />
<XButton :title="t('common.reset')" type="danger" @click="init()" />
</div>
</template>
<script lang="ts" setup>
import type { FormRules } from 'element-plus'

View File

@ -1,12 +1,12 @@
<template>
<el-form ref="formRef" :model="password" :rules="rules" label-width="80px">
<el-form-item :label="t('profile.password.oldPassword')">
<el-form ref="formRef" :model="password" :rules="rules" :label-width="200">
<el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
<InputPassword v-model="password.oldPassword" />
</el-form-item>
<el-form-item :label="t('profile.password.newPassword')">
<el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
<InputPassword v-model="password.newPassword" strength />
</el-form-item>
<el-form-item :label="t('profile.password.confirmPassword')">
<el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
<InputPassword v-model="password.confirmPassword" strength />
</el-form-item>
<el-form-item>
@ -33,17 +33,18 @@ const password = reactive({
})
//
const equalToPassword = (value, callback) => {
const equalToPassword = (_rule, value, callback) => {
if (password.newPassword !== value) {
callback(new Error(t('profile.password.diffPwd')))
} else {
callback()
}
}
const rules = reactive<FormRules>({
oldPassword: [
{ required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
{ min: 3, max: 5, message: t('profile.password.pwdRules'), trigger: 'blur' }
{ min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
],
newPassword: [
{ required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
@ -54,6 +55,7 @@ const rules = reactive<FormRules>({
{ required: true, validator: equalToPassword, trigger: 'blur' }
]
})
const submit = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
@ -63,6 +65,7 @@ const submit = (formEl: FormInstance | undefined) => {
}
})
}
const reset = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()