符合ElementUI层级标准的全屏组件

发布时间 2023-10-10 18:55:23作者: yzxznb

众所周知,浏览器是有官方的全屏API的:Element.requestFullscreen(),它可以让一个元素立刻铺满视窗,并且置于所有元素之上。官方全屏是设定层级高于一切,那些append-to-body的弹窗,无论z-index多高,也绝对不会被显示出来。而那些非append-to-body模式的弹出层,确实会在某些业务场景不符合要求。

符合ElementUI层级标准的全屏组件

和浏览器官方API实现全屏的思路基本一致,但不同的地方在于:

  • 官方全屏会默认置顶,z-index无限大;
  • 封装的全屏组件,z-index符合PopupManager管家的规范。