view-design / ViewUI

A high quality UI Toolkit built on Vue.js 2.0
https://www.iviewui.com/
Other
2.65k stars 797 forks source link

[Bug Report]Drawer抽屉嵌套使用并且均 transfer to body 时层级错误 #995

Open shizhihuaxu opened 3 years ago

shizhihuaxu commented 3 years ago

Environment

win chrome vue2.6

Reproduction link

https://run.iviewui.com/

Steps to reproduce

将官方 demo 中 Drawer 组件的多层抽屉示例代码同层级的drawer 改为嵌套形式,第二层级嵌套在第一层级的drawer内部(并且两者 transter: true),此时第二层级的抽屉无法显示,被第一层级的抽屉遮盖。

What is expected?

两者均transfer to body 时,被嵌套在内层的抽屉渲染在外层之上

What is actually happening?

两者均transfer to body 时,被嵌套在内层的抽屉优先于外层抽屉渲染,导致展示时,内层抽屉被外层抽屉遮盖


两个嵌套抽屉的形式如下:

<template>
    <Button @click="value5 = true" type="primary">Open Drawer</Button>
    <Drawer title="Multi-level drawer" width="512" :closable="false" v-model="value5">
        <Button @click="value6 = true" type="primary">Two-level Drawer</Button>

        <Drawer title="Two-level Drawer" :closable="false" v-model="value6">
            This is two-level drawer.
        </Drawer>
    </Drawer>
</template>