ant-design-vue <v-modal>弹窗在嵌套一个弹窗

Ant Design Vue库中的`<v-modal>`组件是一个轻量级的弹窗组件，用于显示模态对话框。如果你想在一个弹窗内部再嵌套另一个弹窗，可以按照以下步骤操作：

1. 首先，在外部弹窗 (`parentModal`) 中使用 `v-model` 绑定状态，表示弹窗是否打开：

<template>
  <v-modal v-model="isParentModalOpen">
    <!-- 外部内容 -->
    <div slot="footer">
      <a @click="openNestedModal">点击打开内层弹窗</a>
    </div>
  </v-modal>
</template>

<script>
export default {
  data() {
    return {
      isParentModalOpen: false,
    };
  },
  methods: {
    openNestedModal() {
      this.isParentModalOpen = true; // 当外层弹窗打开时，显示内层
      this.$nextTick(() => { // 等待DOM渲染完成
        this.$refs.nestedModal.open(); // 如果有已注册的内层弹窗引用
      });
    },
  },
};
</script>

2. 对于内层弹窗 (`nestedModal`)，你可以在模板中定义并注册它，同时提供关闭方法：

<template>
  <v-modal ref="nestedModal" v-model="isNestedModalOpen">
    <!-- 内层内容 -->
    <div slot="footer">
      <a @click="closeNestedModal">关闭我</a>
    </div>
  </v-modal>
</template>

<script>
export default {
  data() {
    return {
      isNestedModalOpen: false,
    };
  },
  methods: {
    closeNestedModal() {
      this.isNestedModalOpen = false;
    },
  },
};
</script>

当你点击外部弹窗中的链接时，首先打开外层弹窗，然后通过 `$nextTick()` 确保在调用内层弹窗的 `open()` 方法之后DOM已经更新，然后再打开内层。