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>
|
||||||
|
|
||||||
<el-form-item prop="code">
|
<el-form-item v-if="captchaEnabled" prop="code">
|
||||||
<div class="captcha-row">
|
<div class="captcha-row">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.code"
|
v-model="loginForm.code"
|
||||||
|
|
@ -93,6 +93,7 @@ const loginFormRef = ref()
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const captchaImg = ref('')
|
const captchaImg = ref('')
|
||||||
const uuid = ref('')
|
const uuid = ref('')
|
||||||
|
const captchaEnabled = ref(false)
|
||||||
|
|
||||||
const loginForm = ref({
|
const loginForm = ref({
|
||||||
username: 'admin',
|
username: 'admin',
|
||||||
|
|
@ -112,10 +113,13 @@ const getCaptcha = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request.get('/api/captchaImage')
|
const res = await request.get('/api/captchaImage')
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
|
captchaEnabled.value = res.data.captchaEnabled
|
||||||
|
if (captchaEnabled.value) {
|
||||||
captchaImg.value = res.data.img
|
captchaImg.value = res.data.img
|
||||||
uuid.value = res.data.uuid
|
uuid.value = res.data.uuid
|
||||||
// 如果验证码未启用,设置验证规则为非必填
|
loginRules.code[0].required = true
|
||||||
if (!res.data.captchaEnabled) {
|
} else {
|
||||||
|
// 验证码未启用,设置为非必填
|
||||||
loginRules.code[0].required = false
|
loginRules.code[0].required = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue