最近做了一个驾驶舱大屏需求，用的若依框架，若依本身有一个全屏按钮，需要再给驾驶舱加一个全屏按钮，单独全屏驾驶舱，不要侧边栏导航栏。思路如下：
- 使用screenFull组件，直接调用全屏方法使大屏dom全屏展示
<template><div class="app-container" ref="cockpitRef"><div id="top-header"><div class="center-title"></div><el-button class="screen-full-btn" @click="toggleFullscreen()"><svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"/></el-button></div><div class="main-content"></div></div>
</template>
export default {name: "Cockpit",data() {return {isFullscreen: false,};},mounted() {if (screenfull.isEnabled) {screenfull.on("change", this.handleChange);}},beforeDestroy() {if (screenfull.isEnabled) {screenfull.off("change", this.handleChange);}},methods: {// 全屏toggleFullscreen() {if (!screenfull.isEnabled) {this.$message({ message: "你的浏览器不支持全屏", type: "warning" });return false;}screenfull.toggle(this.$refs.cockpitRef);},handleChange() {this.isFullscreen = screenfull.isFullscreen;},},
};
-
似乎没有问题，但是大屏中有很多Element UI的时间选择器、下拉框、popover等弹框，这些弹框全部显示不出来了！
试图解决，查询到给弹框组件加
:append-to-body="false"等类似属性。因为弹框原本是挂载在body上的， 但是我是全屏了局部的dom，全屏之后的dom元素层级是最高的，不管popover设置多大的z-index都没有用，所以要加这个属性让他不挂载在body上，这样弹框就显示出来了。但是这样又出现了一些问题：
- 弹框全屏后位置不对，没有紧挨着输入框。对比了一下dom，发现弹框挂载在body上时，弹框是相对于输入框绝对定位，而不挂载在body上时，弹框变成了fixed定位。所以我加了一个样式试图去控制弹框的定位：
::v-deep .el-popper {//由于页面单独全屏后会导致position变成fixed，导致popover显示出现问题，所以加上强制absoluteposition: absolute !important;
}
- 加上这个属性后，弹框的dom位置在点击元素的下面。这个大屏里面有几个自定义组件，组件里面发现弹框的位置被限制在了组件内，会导致弹框出现一些不受控制的换行和显示不全的问题，这个问题可以通过强制修改定位解决，虽说不太好
- 时间选择器、下拉框的位置无法自动根据空间是否足够自动调整placement。明明下面已经没有空间了，他还在下面展示。el-popover也是，placement属性失效了
- 又碰到了一个问题：全屏功能失效，无法去除浏览器自带操作栏和窗口啥的，关闭控制台恢复
- 碰到了这么多无法解决的问题后，我还在孜孜不倦地试图解决问题，哪怕这些问题很可能都是popper.js组件的问题（也就是Element UI弹框的底层实现弹窗）真的很佩服自己，勤勤恳恳地查了一天怎么解决，调用popper的update方法，用appendChild挂载这那的，想了很多办法，但是始终没有换思路。
实在解决不了了去找了领导，领导考虑了半天让我尝试一下换思路。不全屏cockpit dom，而是全屏整个body，然后用fixed定位强制全屏显示cockpit dom，这样就不存在弹框的这些问题了
具体解决方法后续再写吧 累了 收拾收拾准备美美过周末了
