背景
需求是页面有一个列表，点击全屏显示按钮时，显示该列表，该列表的每一行还可以点开查看详情，使用Drawer显示，全屏使用的依赖包是"screenfull": "^6.0.2"，页面大体代码如下：
<template><el-drawer >详情相关内容...</el-drawer><div class="list-container" v-loading="loading" ref="list">列表相关内容...</div>
</template>
<script lang="ts" setup>
...
const list = ref();
const fullScreenChange = () => {isFull.value = !isFull.value;if (isFull.value) {// 显示全屏screenfull.request(list.value);} else {// 退出全屏screenfull.exit();}
};
</script>
原因
在全屏进入后，Drawer就无法显示了。
原因是它的元素默认附加到父元素上，不在全屏的范围内，而Drawer不支持自定义他元素要附加的位置，要么是body，要么是父元素。附加到body上也是不能显示的，因为那样也不在全屏范围内，
解决方案
让Drawer附加的父元素在全屏范围，直接添加一个空的父div，将两个内容都放到父div下，全屏显示父div就可以了，代码类似下面：
<template>
<div ref="fullScreenDiv"><el-drawer >详情相关内容...</el-drawer><div class="list-container" v-loading="loading" >列表相关内容...</div>
</div>
</template>
<script lang="ts" setup>
...
const fullScreenDiv = ref();
const fullScreenChange = () => {isFull.value = !isFull.value;if (isFull.value) {// 显示全屏screenfull.request(fullScreenDiv.value);} else {// 退出全屏screenfull.exit();}
};
</script>
问题解决。
类似的组件在全屏下不显示也可以参考。
)
)