fix: 验证码禁用时自动隐藏输入框
## 问题 登录页面验证码图片无法显示,且验证码已禁用但输入框仍然显示 ## 解决方案 当captchaEnabled=false时,完全隐藏验证码输入框和图片 ## 修改内容 1. 添加captchaEnabled响应式变量控制显示 2. 使用v-if条件渲染验证码输入框 3. 根据captchaEnabled动态设置验证规则 ## 用户体验 - 验证码启用:显示输入框和图片,必填 - 验证码禁用:完全隐藏,用户只需输入用户名密码 --- 作者:湖北新华业务中台研发团队
This commit is contained in:
parent
dde660857a
commit
7f6d6d038a
|
|
@ -30,7 +30,7 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="code">
|
||||
<el-form-item v-if="captchaEnabled" prop="code">
|
||||
<div class="captcha-row">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
|
|
@ -93,6 +93,7 @@ const loginFormRef = ref()
|
|||
const loading = ref(false)
|
||||
const captchaImg = ref('')
|
||||
const uuid = ref('')
|
||||
const captchaEnabled = ref(false)
|
||||
|
||||
const loginForm = ref({
|
||||
username: 'admin',
|
||||
|
|
@ -112,10 +113,13 @@ const getCaptcha = async () => {
|
|||
try {
|
||||
const res = await request.get('/api/captchaImage')
|
||||
if (res.code === 200) {
|
||||
captchaImg.value = res.data.img
|
||||
uuid.value = res.data.uuid
|
||||
// 如果验证码未启用,设置验证规则为非必填
|
||||
if (!res.data.captchaEnabled) {
|
||||
captchaEnabled.value = res.data.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
captchaImg.value = res.data.img
|
||||
uuid.value = res.data.uuid
|
||||
loginRules.code[0].required = true
|
||||
} else {
|
||||
// 验证码未启用,设置为非必填
|
||||
loginRules.code[0].required = false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue