Vue按照顺序实现多级弹窗（附Demo）

在Vue中实现多级弹窗，通常可以通过组件的嵌套和控制显示逻辑来完成。以下是一个简单的示例，展示了如何实现一个按顺序弹出的多级弹窗：

<template>
  <div>
    <!-- 第一级弹窗 -->
    <button @click="showModal1 = true">打开第一级弹窗</button>
    <div v-if="showModal1" class="modal">
      <div class="modal-content">
        第一级弹窗内容
        <button @click="showModal2 = true">打开第二级弹窗</button>
      </div>
    </div>
 
    <!-- 第二级弹窗 -->
    <div v-if="showModal2" class="modal">
      <div class="modal-content">
        第二级弹窗内容
        <button @click="showModal2 = false">关闭弹窗</button>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showModal1: false,
      showModal2: false,
    };
  },
};
</script>
 
<style>
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

在这个例子中，我们定义了两个模态窗口，showModal1和showModal2分别控制它们的显示。当用户点击第一级弹窗中的按钮时，showModal1设置为true，显示第一级弹窗。在第一级弹窗内点击另一个按钮时，showModal2设置为true，显示第二级弹窗。关闭弹窗时，将相应的显示属性设置为false。CSS样式仅为示例，实际应用中需要根据设计进行调整。