vue 含有五个弹窗，如何互不影响，不同时弹

要实现五个弹窗互不影响且不会同时弹出，可以在组件中使用不同的状态来控制弹窗的显示和隐藏。

假设这五个弹窗分别对应五个组件，可以在每个组件中设置一个变量来表示当前弹窗的显示状态，比如可以使用 `isShow` 来表示是否显示弹窗。在需要弹出弹窗的时候，只需要将对应的组件中的 `isShow` 变量设置为 `true` 即可。同时，需要在每个组件中监听窗口关闭事件，并将对应的 `isShow` 变量设置为 `false`，这样就可以保证弹窗关闭后不会影响其他弹窗的显示状态。

另外，为了防止多个弹窗同时弹出，可以使用一个全局变量来表示是否已经有弹窗在显示了。在点击弹窗触发事件时，先判断全局变量的值，如果已经有弹窗在显示，则不再触发当前弹窗的显示事件。

下面是一个示例代码：

<template>
  <div>
    <!-- 弹窗1 -->
    <div v-if="isShow1">
      <!-- 弹窗内容 -->
      <div>
        ...
      </div>
      <!-- 弹窗关闭按钮 -->
      <button @click="close1">关闭</button>
    </div>
    <!-- 弹窗2 -->
    <div v-if="isShow2">
      <!-- 弹窗内容 -->
      <div>
        ...
      </div>
      <!-- 弹窗关闭按钮 -->
      <button @click="close2">关闭</button>
    </div>
    <!-- 弹窗3 -->
    <div v-if="isShow3">
      <!-- 弹窗内容 -->
      <div>
        ...
      </div>
      <!-- 弹窗关闭按钮 -->
      <button @click="close3">关闭</button>
    </div>
    <!-- 弹窗4 -->
    <div v-if="isShow4">
      <!-- 弹窗内容 -->
      <div>
        ...
      </div>
      <!-- 弹窗关闭按钮 -->
      <button @click="close4">关闭</button>
    </div>
    <!-- 弹窗5 -->
    <div v-if="isShow5">
      <!-- 弹窗内容 -->
      <div>
        ...
      </div>
      <!-- 弹窗关闭按钮 -->
      <button @click="close5">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow1: false,
      isShow2: false,
      isShow3: false,
      isShow4: false,
      isShow5: false,
      isShowing: false // 是否已经有弹窗在显示
    }
  },
  methods: {
    // 显示弹窗1
    show1() {
      if (!this.isShowing) {
        this.isShow1 = true
        this.isShowing = true
      }
    },
    // 关闭弹窗1
    close1() {
      this.isShow1 = false
      this.isShowing = false
    },
    // 显示弹窗2
    show2() {
      if (!this.isShowing) {
        this.isShow2 = true
        this.isShowing = true
      }
    },
    // 关闭弹窗2
    close2() {
      this.isShow2 = false
      this.isShowing = false
    },
    // 显示弹窗3
    show3() {
      if (!this.isShowing) {
        this.isShow3 = true
        this.isShowing = true
      }
    },
    // 关闭弹窗3
    close3() {
      this.isShow3 = false
      this.isShowing = false
    },
    // 显示弹窗4
    show4() {
      if (!this.isShowing) {
        this.isShow4 = true
        this.isShowing = true
      }
    },
    // 关闭弹窗4
    close4() {
      this.isShow4 = false
      this.isShowing = false
    },
    // 显示弹窗5
    show5() {
      if (!this.isShowing) {
        this.isShow5 = true
        this.isShowing = true
      }
    },
    // 关闭弹窗5
    close5() {
      this.isShow5 = false
      this.isShowing = false
    }
  }
}
</script>