ant-design-vue
ant-design-vue copied to clipboard
在使用a-drawer嵌套抽屉时遇到的样式问题
- [ ] I have searched the issues of this repository and believe that this is not a duplicate.
Version
4.1.0
Environment
"vue": "^3.4.15" Chrome 版本 121.0.6167.185(正式版本)win11
Reproduction link
https://github.com/MrMa98/antdv/blob/master/TestDemo.vue
Steps to reproduce
将两个抽屉同时打开
What is expected?
不会出现样式问题,从下边弹出右边样式不变
What is actually happening?
样式问题
无
可以这样使用,将第二层drawer从第一层drawer中的默认slot中拿出来
<template>
<a-button type="primary" @click="showDrawer">Open</a-button>
<a-drawer
v-model:open="open"
title="Multi-level drawer"
width="520"
:closable="false"
:footer-style="{ textAlign: 'right' }"
@close="onClose"
:style="{ position: 'relative' }"
>
<a-button type="primary" @click="showChildrenDrawer">Two-level drawer</a-button>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
<a-button type="primary" @click="onClose">Submit</a-button>
</template>
</a-drawer>
<a-drawer v-model:open="childrenDrawer" title="Two-level Drawer" width="320" :closable="false"
:style="{ position: 'absolute' }" >
<a-button type="primary" @click="showChildrenDrawer">This is two-level drawer</a-button>
</a-drawer>
</template>
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days