Vue.js + iView 中防止模态框提前关闭的解决方案

问题描述

在使用 iView 的 Modal 组件实现密码修改功能时，我遇到了一个常见问题：点击确定按钮后，无论 API 调用是否成功，模态框都会自动关闭。这导致了糟糕的用户体验，因为用户在密码修改失败时无法看到错误信息。

问题原因

iView 的 Modal 组件默认行为是在点击确定按钮时自动关闭。这是因为：

1. Modal 的 @on-ok 事件在点击确定时立即触发
2. 模态框在等待异步操作完成之前就关闭了
3. 错误信息在模态框已经关闭后才显示

解决方案

以下是我们的优化实现方案：

1. 自定义底部按钮

不使用 Modal 的默认确定和取消按钮，而是创建自定义的底部按钮：

<Modal
  v-model="changePwdModal"
  title="修改密码"
  :loading="isChangepwdLoading"
  :closable="!isChangepwdLoading"
  :mask-closable="false"
>
  <!-- 表单内容 -->
  <div slot="footer">
    <Button type="text" @click="handleCancel">取消</Button>
    <Button type="primary" :loading="isChangepwdLoading" @click="handleChangePwd">确定</Button>
  </div>
</Modal>

2. 加载状态控制

添加加载状态以防止重复提交和意外关闭：

data () {
  return {
    isChangepwdLoading: false,
    changePwdModal: false,
    formData: {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  }
}

3. 异步处理优化

实现正确的异步处理和错误捕获：

async handleChangePwd () {
  this.$refs.changePwdForm.validate(async (valid) => {
    if (valid) {
      this.isChangepwdLoading = true
      try {
        const res = await changePassword({
          password: this.formData.oldPassword,
          newPassword: this.formData.newPassword,
          confirmPassword: this.formData.confirmPassword
        })
        
        if (res.data.code === 200) {
          this.$Message.success('密码修改成功')
          this.formData = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          }
          this.changePwdModal = false
        } else {
          this.$Message.error(res.data.message)
        }
      } catch (error) {
        this.$Message.error('密码修改失败：' + error)
      } finally {
        this.isChangepwdLoading = false
      }
    }
  })
}

4. 取消处理

实现清晰的取消处理逻辑：

handleCancel () {
  this.changePwdModal = false
  this.formData = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}

5. 防止意外关闭

添加多重保护以防止模态框意外关闭：

<Modal
  :closable="!isChangepwdLoading"
  :mask-closable="false"
  <!-- 其他属性 -->
>

• :closable="!isChangepwdLoading" - 在加载时禁用关闭按钮
• :mask-closable="false" - 防止点击背景时关闭

主要优势

这个实现方案带来了以下好处：

1. 更好的用户体验：失败时模态框保持打开状态，用户可以清楚地看到错误信息
2. 加载状态反馈：提交按钮显示加载状态，提供视觉反馈
3. 防止重复提交：加载状态可以防止多次提交
4. 表单重置控制：只在提交成功或手动取消时才清空表单
5. 可控的关闭行为：模态框只在成功或明确取消时关闭

总结

在 Vue.js 和 iView 中处理模态框时，特别是涉及异步操作时，控制好关闭行为非常重要。通过实现：

• 自定义底部按钮
• 合理的加载状态
• 正确的异步处理
• 防止意外关闭
• 适时的表单重置
• 清晰的用户反馈

我们可以创建一个更加健壮和用户友好的交互体验。这些实践可以帮助你在 Vue.js 应用中创建更好的模态框交互效果。