iView UI 框架（View Design）中，捕获 Modal 关闭事件教程

在 iView UI 框架（View Design）中，若需捕获 Modal 关闭事件（如点击关闭按钮、遮罩层或手动触发关闭），可通过以下三种核心方式实现：

---

一、通过 @on-visible-change监听状态变化

@on-visible-change是 Modal 组件的核心事件，当 Modal 的显示状态（v-model绑定的值）发生变化时触发，参数为当前状态（true表示显示，false表示关闭）。

示例代码

<template>
  <div>
    <Button @click="showModal = true">打开弹窗</Button>
    <Modal
      v-model="showModal"
      title="监听关闭事件"
      @on-visible-change="handleVisibleChange"
    >
      <p>点击关闭按钮或遮罩层时触发事件</p>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    handleVisibleChange(isVisible) {
      if (!isVisible) {
        this.$Message.info("弹窗已关闭！");
        // 执行自定义逻辑（如数据保存、页面跳转）
      }
    }
  }
};
</script>

关键说明

• 触发时机：每次 Modal 显示或隐藏时均触发。

• 参数判断：通过参数 isVisible区分状态（false表示关闭）。

---

二、通过 @on-cancel和 @on-ok捕获主动关闭操作

• @on-cancel：点击右上角 取消按钮​ 或遮罩层时触发。

• @on-ok：点击 确定按钮​ 时触发。

示例代码

<template>
  <Modal
    v-model="showModal"
    title="操作反馈"
    @on-cancel="handleCancel"
    @on-ok="handleOk"
  >
    <p>确认要关闭吗？</p>
  </Modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    handleCancel() {
      this.$Message.info("用户点击了取消");
    },
    handleOk() {
      this.$Message.info("用户点击了确定");
      this.showModal = false; // 手动关闭弹窗
    }
  }
};
</script>

关键说明

• @on-cancel：适用于需要区分“取消”操作的场景（如表单未保存时提示用户）。

• @on-ok：适用于需要验证数据或执行提交操作的场景。

---

三、通过 v-model手动控制关闭逻辑

通过监听 v-model绑定的变量变化，结合业务逻辑控制关闭行为。

示例代码

<template>
  <div>
    <Button @click="openModal">打开弹窗</Button>
    <Modal
      v-model="showModal"
      title="手动控制关闭"
      :mask-closable="false" <!-- 禁用遮罩层关闭 -->
    >
      <p>需手动点击按钮关闭</p>
      <template slot="footer">
        <Button @click="showModal = false">关闭</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    openModal() {
      this.showModal = true;
    }
  }
};
</script>

关键说明

• mask-closable="false"：禁用遮罩层点击关闭，默认为 true。

• 自定义关闭按钮：通过 slot="footer"添加自定义按钮，点击后修改 v-model值。

---

四、高级场景：阻止默认关闭行为

若需在关闭前进行验证（如表单未保存时阻止关闭），可通过以下步骤实现：

1. 禁用默认关闭

<Modal
  v-model="showModal"
  :mask-closable="false"
  :closable="false" <!-- 禁用标题栏关闭按钮 -->
>
  <!-- 内容 -->
</Modal>

2. 自定义关闭逻辑

<template>
  <Modal
    v-model="showModal"
    :closable="false"
    @on-ok="handleOk"
  >
    <p>表单未保存，确定要关闭吗？</p>
    <template slot="footer">
      <Button @click="showModal = false">强制关闭</Button>
      <Button type="primary" @click="saveData">保存并关闭</Button>
    </template>
  </Modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    handleOk() {
      this.saveData(); // 自动触发保存逻辑
    },
    saveData() {
      // 保存数据后关闭
      this.showModal = false;
    }
  }
};
</script>

---

五、总结

方法​	适用场景​	特点​
@on-visible-change	需要监听所有状态变化（显示/隐藏）	通用性强，但需手动判断关闭状态
@on-cancel/@on-ok	区分用户操作类型（取消/确认）	语义明确，适合表单验证等场景
手动控制 v-model	需要完全自定义关闭逻辑	灵活性高，可结合业务规则拦截关闭

通过合理组合上述方法，可实现精准的 Modal 关闭事件捕获与处理。