刷粉网站推广便宜,博客类网站源码,青岛做网站哪个公司好,济南做网站哪里便宜需求#xff1a;除了左侧菜单#xff0c;右侧主体部分全部全屏 首先下载screenfull全屏插件
npm install screenfull --save页面引入
import screenfull from screenfull;我这里是右上角全屏图标
el-iconrefelIconRefcolor#ffffffsize2…需求除了左侧菜单右侧主体部分全部全屏 首先下载screenfull全屏插件
npm install screenfull --save页面引入
import screenfull from screenfull;我这里是右上角全屏图标
el-iconrefelIconRefcolor#ffffffsize24pxclickonClick($event)classdry-touchscreen_elIcon
full-screen /
/el-iconTs代码
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
:teleportedfalseappend-tostageel-select:teleportedfalseappend-tostage
el-optionv-foritem in classTeamList:keyitem.id:labelitem.name:valueitem.id/
/el-select在这里有个疑问ElementPlus官网上给到的是teleported是true的话才会挂在到append-tostage这个DOM元素上但是此时我设置false在全屏时候下拉框可以展开true的时候下拉框还是展开不了希望知道的大佬麻烦解释一下。 好了加上以上代码可以解决全屏情况下下拉框不展示。
2再来解决一下表格里边的下拉框。
在这个下拉框里想到了DOM挂在是不是全屏插件的BUG等等一些列能解决的甚至在表格里用ElementPlus手写一个Select都解决不了当我在快为这个问题崩溃的时候在想会不会是CSS的问题就尝试解决CSS的问题。结果还真是CSS问题。 position: fixed;加上固定定位就可以了。
问题三全屏的时候Message 消息提示不显示了非全屏可以显示
正在解决…
