背景

需求是页面有一个列表，点击全屏显示按钮时，显示该列表，该列表的每一行还可以点开查看详情，使用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>

问题解决。
类似的组件在全屏下不显示也可以参考。