vue-final-modal 关闭弹窗按钮 多个弹窗同时点开 关闭按钮覆盖 不能一次关闭掉 如何处理

Vue-Final-Modal是一个基于Vue.js的轻量级弹窗组件库，它可能遇到你说的问题是因为当多个modal同时打开时，它们各自都有一个独立的关闭按钮，并且默认情况下会覆盖其他modal的关闭动作。如果你想要解决这个问题，可以考虑以下几个方案：

1. **控制唯一标识**：为每个modal实例添加唯一的标识符，然后通过这个标识判断哪个modal应该被关闭，而不是简单地覆盖所有。

<template>
  <final-modal v-for="(modal, index) in modals" :key="index" @close="handleClose(modal.id)">
    <!-- modal内容 -->
  </final-modal>
</template>

<script>
export default {
  data() {
    return {
      modals: [], // 初始化一个空数组存储modal的状态
    };
  },
  methods: {
    handleClose(id) {
      this.modals = this.modals.filter((modal) => modal.id !== id);
    },
  },
};
</script>

2. **阻止默认关闭事件**：在组件内处理关闭事件时，可以检查是否有其他弹窗正在显示，如果没有再触发关闭操作。

methods: {
  closeModal(id) {
    if (!this.showingOtherModals()) {
      this.handleClose(id);
    }
  },
  showingOtherModals() {
    return this.modals.some((modal) => modal.isActive);
  },
}

3. **全局管理状态**：如果弹窗的数量不是很多，也可以考虑在整个应用中维护一个全局状态，统一管理所有modal的显示和隐藏。

无论哪种方法，都需要在`final-modal`的关闭事件上做一些定制处理，确保点击关闭按钮时只关闭当前的modal。