网站盈利模式设计企业网站教程

需求：除了左侧菜单，右侧主体部分全部全屏

首先下载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 消息提示不显示了，非全屏可以显示

正在解决…