iView如何防止Modal在验证失败时不关闭？

在iView中，如果你想防止Modal在数据校验失败时立即关闭，可以在`confirm`按钮的`on-ok`事件处理程序中添加验证步骤。如果验证失败，你可以阻止默认的操作并设置一个标识符来标记Modal的状态，然后展示错误消息。以下是示例代码：

<Modal v-model="showModal" title="确认操作">
  <p>请填写必填字段：</p>
  <FormItem prop="requiredField">
    <Input v-model="form.requiredField" placeholder="请输入内容"></Input>
  </FormItem>
  <div slot="footer">
    <Button type="text" @click.stop="checkForm">提交</Button>
    <Button type="primary" :disabled="!isValid" @click.stop="submit">确定</Button>
  </div>
</Modal>

<script>
export default {
  data() {
    return {
      showModal: false,
      form: {
        requiredField: '',
      },
      isValid: true,
    };
  },
  methods: {
    checkForm() {
      this.isValid = validateRequiredField(this.form.requiredField); // 假设validateRequiredField是你自定义的校验函数
    },
    submit() {
      if (this.isValid) {
        // 执行保存或确认操作
        this.save();
      } else {
        // 验证失败，取消默认的关闭行为
        event.preventDefault(); // 或者使用event.stopPropagation()
        this.showAlert('请确保所有字段已填写'); // 显示错误提示
      }
    },
    save() {
      this.showModal = false; // 验证成功后关闭Modal
      // 其他保存操作...
    },
  },
};
</script>

在这个例子中，当用户点击“提交”按钮时，首先会调用`checkForm`函数进行校验。如果校验失败，`isValid`将变为`false`，同时阻止默认的关闭行为，并显示错误消息。只有当`isValid`为`true`时，才执行保存操作并关闭Modal。