全屏状态下n-image-group被遮挡看不见
zsjbsn opened this issue · comments
Clear and concise description of the problem
当使用requestFullscreen命令让父元素全屏时，预览图片看不见，被遮挡
Suggested solution
无
Alternative
No response
Additional context
No response
Validations
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Reproducibility provided Minimal reproducible example
@jahnli 不点击全屏按钮时，点击图片可以正常预览
点击全屏按钮后，容器处于全屏状态，此时点击图片无法预览，测试代码如下：
<script setup lang="ts">
import { ref } from 'vue'
import { NButton, NImageGroup, NSpace, NImage } from 'naive-ui'
const el = ref()
const toggleFullscreen = () => {
const node = el.value as HTMLElement
if (document.fullscreenElement) document.exitFullscreen()
else node.requestFullscreen()
}
</script>
<template>
<div ref="el" class="test">
<n-image-group>
<n-space>
<n-button @click="toggleFullscreen">全屏</n-button>
<n-image width="100" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
<n-image
width="100"
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
/>
</n-space>
</n-image-group>
</div>
</template>
<style lang="postcss">
.test {
background-color: white;
padding: 20px;
}
</style>
document.querySelector("html").requestFullscreen()
@jahnli 大部分应用场景如下：
现在只需要全屏中间的部分，方便展示它的内容。如果整个html都全屏，中间的部分还是占比较很小，没有什么意义。
<script setup lang="ts">
import { ref } from 'vue'
import { NButton, NImageGroup, NSpace, NImage } from 'naive-ui'
const el = ref()
const toggleFullscreen = () => {
const node = el.value as HTMLElement
if (document.fullscreenElement) document.exitFullscreen()
else node.requestFullscreen()
}
</script>
<template>
<div class="test">
<div class="header">头部内容</div>
<div class="container">
<div class="nav">导航内容</div>
<div ref="el" class="body">
<n-image-group>
<n-space>
<n-button @click="toggleFullscreen">全屏</n-button>
<n-image width="100" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
<n-image
width="100"
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
/>
</n-space>
</n-image-group>
</div>
</div>
<div class="footer">尾部内容</div>
</div>
</template>
<style lang="postcss">
.test {
background-color: white;
display: flex;
flex-direction: column;
min-height: 100vh;
.header,
.footer {
font-size: 30px;
background-color: darkgray;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
.container {
height: 200px;
display: flex;
flex: 1;
.nav {
background-color: lightgray;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 250px;
}
}
.body {
background-color: white;
padding: 30px;
}
}
</style>
好像是要预览的元素在全屏元素里，现在预览的跟 body 是平级
不确定有没有别的解决方案