u

code/base-project/base-vue/src/App.vue

@@ -1,24 +1,58 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const value = ref('')
+const AModal1Visible = ref(false)
+const AModal2Visible = ref(false)
+const AModal3Visible = ref(false)
 </script>
 
 <template>
-  <div class="main">
-    <ASwitch v-model="value" loading checked-value="1" unchecked-value="2" checked-content="1" unchecked-content="2" />
-    {{ value }}
-  </div>
-</template>
+  <button @click="AModal1Visible = true">
+    打开第 1 个 AModal
+  </button>
 
-<style lang="scss" scoped>
-.main {
-  width: 100%;
-  height: 800px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 16px;
-}
-</style>
+  <!-- 第 1 个 AModal -->
+  <AModal v-model:visible="AModal1Visible" mask-closable>
+    <template #title>
+      第 1 个 AModal
+    </template>
+    <p>这是第 1 个弹窗内容</p>
+    <template #footer>
+      <button @click="AModal2Visible = true">
+        打开第 2 个 AModal
+      </button>
+      <button @click="AModal1Visible = false">
+        关闭
+      </button>
+    </template>
+  </AModal>
+
+  <!-- 第 2 个 AModal -->
+  <AModal v-model:visible="AModal2Visible" mask-closable>
+    <template #title>
+      第 2 个 AModal
+    </template>
+    <p>这是第 2 个弹窗内容</p>
+    <template #footer>
+      <button @click="AModal3Visible = true">
+        打开第 3 个 AModal
+      </button>
+      <button @click="AModal2Visible = false">
+        关闭
+      </button>
+    </template>
+  </AModal>
+
+  <!-- 第 3 个 AModal -->
+  <AModal v-model:visible="AModal3Visible" mask-closable>
+    <template #title>
+      第 3 个 AModal
+    </template>
+    <p>这是第 3 个弹窗内容</p>
+    <template #footer>
+      <button @click="AModal3Visible = false">
+        关闭
+      </button>
+    </template>
+  </AModal>
+</template>