北仑网站推广信誉好的合肥网站建设
需求：除了左侧菜单，右侧主体部分全部全屏
首先下载screenfull全屏插件
npm install screenfull --save
页面引入
import screenfull from 'screenfull';
我这里是右上角全屏图标
<el-iconref="elIconRef"color="#ffffff"size="24px"@click="onClick($event)"class="dry-touchscreen_elIcon">
<full-screen />
</el-icon>
Ts代码：
const function onClick(){screenfull.toggle();
}
问题一：
因为用的是飞速低代码开发平台，此时会出现一堆BUG，类似于你全屏页面上有Dialog的话，在全屏的时候不会显示。
这个时候你就可以按照以下代码写。
注意这个stage.value是你页面最最最外层的ref，不懂的同学可以看代码下边的截图。
const function onClick(){screenfull.toggle(stage.value);
}
到此为止全屏后Dialog不出现的问题解决了，一开始以为是z-index的问题，加上以后不是，就是挂在到最外层的DOM上。
问题二：
如果Dialog弹框内容有表格且表格里面有Select的话，非全屏状态下下拉框可以展开。
而全屏下，下拉框不能展开。
在这里也想到过层级的问题，挂在DOM的问题，来看一下解决方法吧。
可以看到上面截图上有两个下拉框，表格里面的是飞速低代码生成的，右上角的是我用ElementPlus写的。
1：先解决一下ElementPlus的加入以下代码就可以了。stage是我最最最外层的DOM
:teleported="false"@append-to="stage"
<el-select:teleported="false"@append-to="stage"
><el-optionv-for="item in classTeamList":key="item.id":label="item.name":value="item.id"/>
</el-select>
在这里有个疑问ElementPlus官网上给到的是teleported是true的话才会挂在到@append-to="stage"这个DOM元素上，但是此时我设置false，在全屏时候下拉框可以展开，true的时候下拉框还是展开不了，希望知道的大佬，麻烦解释一下。
好了，加上以上代码，可以解决全屏情况下，下拉框不展示。
2：再来解决一下表格里边的下拉框。
在这个下拉框里想到了，DOM挂在，是不是全屏插件的BUG，等等一些列能解决的，甚至在表格里用ElementPlus手写一个Select，都解决不了，当我在快为这个问题崩溃的时候，在想会不会是CSS的问题，就尝试解决CSS的问题。结果还真是CSS问题。
position: fixed;
加上固定定位就可以了。
问题三：全屏的时候Message 消息提示不显示了，非全屏可以显示
正在解决…