vue实现弹窗里面多个窗口切换

在Vue.js中实现弹窗内的多个窗口切换，通常可以使用组件化和动态渲染的方式来实现。你可以创建一个基础的弹窗组件（比如`ModalWindow.vue`），然后在这个组件内部包含多个子组件，每个子组件代表一个独立的窗口。

首先，定义一个弹窗容器，它接受一个窗口列表作为props：

<template>
  <div class="modal">
    <transition name="fade">
      <slot v-for="(window, index) in windows" :key="index">
        <component :is="window.componentName" :props="window.props"></component>
      </slot>
    </transition>
    <button @click="switchWindows">切换窗口</button>
  </div>
</template>

<script>
export default {
  props: {
    windows: {
      type: Array,
      // 假设窗口列表是一个数组，包含名称、组件名和可能的属性对象
      default: () => [
        { componentName: 'WindowA', props: {} },
        { componentName: 'WindowB', props: {} }
      ]
    }
  },
  methods: {
    switchWindows() {
      // 这里可以根据需要改变当前显示的窗口索引
      this.windows = [...this.windows, ...this.windows.splice(0, 1)];
    }
  }
}
</script>

然后，在父组件中，你可以像操作数组一样切换窗口列表：

<template>
  <ModalWindow :windows="activeWindows" />
</template>

<script>
import ModalWindow from './ModalWindow.vue';

export default {
  components: {
    ModalWindow
  },
  data() {
    return {
      activeWindows: [
        { componentName: 'WindowA', props: {} },
        // 更多窗口...
      ]
    };
  },
  // 根据业务需求调整切换逻辑
  methods: {
    onButtonClick() {
      this.activeWindows.push(this.activeWindows.shift());
    }
  }
};
</script>

通过这种方式，用户每次点击“切换窗口”按钮，就会从当前显示的窗口切换到下一个窗口。注意，这只是一个基本示例，实际应用可能需要处理更多细节，如窗口的状态管理、动画效果等。