ant desgin vue使用多个modal弹框，层级关系导致

问题描述：两个按钮(按钮A、按钮B)控制两个弹框A和弹框B的显示,弹框用的是Ant Design Vue的Modal组件，会存在新打开的弹框被之前的弹框挡住的问题。

image.png

问题复现步骤：

1、点击按钮A，弹出弹框A

image.png

2、点击弹框内的点击打开弹框B按钮，弹出弹框B，

image.png

3、关闭步骤1,步骤2的两个弹框，然后点击按钮B，弹出弹框B

image.png

4、点击弹框内的点击打开弹框A按钮，弹出弹框A，问题出现了，弹框A被弹框B挡住了。

image.png

问题代码

<template>
  <div>
    <div style="text-align:center;">
      <a-button type="primary" @click="addLimitFuncA">按钮A</a-button>
      <a-button type="danger" style="margin-left:10px;" @click="addLimitFuncB">按钮B</a-button>
    </div>
    <a-modal
        v-model="modalShowA"
        :footer="null"
        title="弹框A"
      >
      <div style="height:100px;margin: 0 auto;">
        <a-button type="primary" @click="addLimitFuncB">点击打开弹框B</a-button>
      </div>
      </a-modal>
  
      <a-modal
      v-model="modalShowB"
        :footer="null"
        title="弹框B"
      >
      <div style="height:300px;margin: 0 auto;">
        <a-button type="danger" @click="addLimitFuncA">点击打开弹框A</a-button>
      </div>
      </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalShowA: false,
      modalShowB: false,
    };
  },

  methods: {
    addLimitFuncA() {
      this.modalShowA = true;
    },
    addLimitFuncB() {
      console.log('添加限制点击了----');
      this.modalShowB = true;

    },
  }

};
</script>
<style scoped lang="less">

</style>

原因：

ant desgin vue的modal弹框组件只会出初始化创建一次。也就是说，层级关系在第一次创建的时候就确定了，后续打开不会影响层级关系，当然一个modal的话，层级关系的影响对于界面的显示影响就不会那么大了。而本例中有多个modal，所以层级关机就会影响多个modal谁在外面，谁在里面了。
由于是最初是弹框A先弹出，弹框B后弹出，所以弹框A相对于弹框B来说，始终是在弹框B的里面。那么后续你无论在怎么弹框，弹框A都会被弹框B挡住。所以上面的例子中，步骤4被挡住的问题就很正常了。

解决办法：

对弹框A的modal设置动态的key，即:key=Math.random(),保证modal每次都是重新创建出来的，而不是只创建一次。注：加在一个modal上，加在多个modal也会有显示问题。

正确代码

<template>
  <div>
    <div style="text-align:center;">
      <a-button type="primary" @click="addLimitFuncA">按钮A</a-button>
      <a-button type="danger" style="margin-left:10px;" @click="addLimitFuncB">按钮B</a-button>
    </div>
    <a-modal
       :key=Math.random()
        v-model="modalShowA"
        :footer="null"
        title="弹框A"
      >
      <div style="height:100px;margin: 0 auto;">
        <a-button type="primary" @click="addLimitFuncB">点击打开弹框B</a-button>
      </div>
      </a-modal>
  
      <a-modal
      v-model="modalShowB"
        :footer="null"
        title="弹框B"
      >
      <div style="height:300px;margin: 0 auto;">
        <a-button type="danger" @click="addLimitFuncA">点击打开弹框A</a-button>
      </div>
      </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalShowA: false,
      modalShowB: false,
    };
  },

  methods: {
    addLimitFuncA() {
      this.modalShowA = true;
    },
    addLimitFuncB() {
      console.log('添加限制点击了----');
      this.modalShowB = true;

    },
  }

};
</script>
<style scoped lang="less">

</style>