应用笔记 · 2023年7月1日

Vue-fullscreen 全屏模式下el-dropdown下拉菜单不显示的问题

Vue3

“vue-fullscreen”: “^3.1.1”
“element-plus”: “^2.2.36”
试用vue-fullscreen实现全屏,全屏状态下,el-dropdown弹出菜单不显示
根本原因:弹出菜单的弹出层扩展到了body元素下面,而fullscreen一般不是全屏body,导致全屏状态下,非fullscreen全屏元素下的弹出层不可见。
此问题有两种解决办法:
1、设置fullscreen的teleported为false
<fullscreen v-model=”isFullScreen” :teleported=”false”>
这种方法可以使下拉菜单显示,但是有一个问题,有时候你只需要将某部分元素全屏,使用这种方法则会将整个页面全屏。
2、设置

<el-dropdown :teleported=”false”>
这种方法完美解决问题。