Draw组件的z-index值不会更新，导致出现层级问题 #8422
Description
<template>
<a-button type="primary" @click="showDrawer1">Open Drawer-1</a-button>
<a-button type="primary" @click="showDrawer2">Open Drawer-2</a-button>
<a-drawer
v-model:open="open"
class="custom-class"
width="60%"
root-class-name="root-class-name"
:root-style="{ color: 'blue' }"
style="color: red"
title="Drawer-1"
placement="right"
@after-open-change="afterOpenChange"
>
<p>Some contents...11111</p>
<a-button type="primary" @click="showDrawer2">inner Open Drawer-2</a-button>
</a-drawer>
<a-drawer
v-model:open="open2"
class="custom-class"
width="50%"
root-class-name="root-class-name"
:root-style="{ color: 'blue' }"
style="color: red"
title="Drawer-2"
placement="right"
@after-open-change="afterOpenChange"
>
<p>Some contents...22222</p>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const open = ref<boolean>(false);
const open2 = ref<boolean>(false);
const afterOpenChange = (bool: boolean) => {
console.log("open", bool);
};
const showDrawer1 = () => {
open.value = true;
};
const showDrawer2 = () => {
open2.value = true;
};
</script>
先点击 Drawer-2 按钮（注意：一定要先点击Drawer-2 按钮），关闭抽屉后再点击Drawer-1按钮，然后在抽屉1中，点击按钮再次打开抽屉2，就会发现抽屉2的层级不会在最顶层