ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

在使用a-drawer嵌套抽屉时遇到的样式问题

Open MrMa98 opened this issue 1 year ago • 2 comments

  • [ ] 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?

样式问题


MrMa98 avatar Feb 21 '24 09:02 MrMa98

可以这样使用,将第二层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>

aShu-guo avatar Mar 05 '24 04:03 aShu-guo

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

github-actions[bot] avatar May 05 '24 02:05 github-actions[bot]