1、现状

在开发两个管理系统，现在的页面20+，其中包含不少的弹窗。在项目开发过程中没人提过弹窗要全屏的事情，且在数据量较大的位置已经增加了可全屏的入口。但老板两次说为什么不给所有的弹窗增加全屏的功能，从中感觉到了侮辱，做页面也有些年头，但从没见过有网站所有窗口支持全屏功能的。

2、思考

• 这个需求是不是合理？

​ 个人认为有20%合理性，这主要是因为在做需求时习惯性忘记要加全屏功能。
​ 80%不合理，因为至少80%的页面没有全屏的必要性，确认弹窗难道也有全屏的必要？

• 这个需求要不要做？

  这是个伪命题，老板说要还能不做？虽然也不是一定要做。

  其次，这是从技术角度还有些意思的探索。

  所以在没有答应的情况下准备做一些技术实践。

• 要怎么做？

  a、不可能为每个弹窗单独增加全屏功能

  b、侵入性应该尽量少

  c、接受少量场景缺陷(80%不会触发)

3、实现

使用的是antd + vue3，思路是一样的，其他场景改改可用。

antd中有实现弹窗全屏的实现，我们要做的就是如何简单的实现同一界面多窗口控制。

全屏实现原理：

• 全屏时通过wrap-class-name设置class
• 通过class实现全屏

4、干货

• 全屏事件监听

const isFullScreen = ref<boolean>(false)
// 将多个控制弹窗显示的变量加入监听
watch([blockChainVisible, ()=>userUploadConfig.visible, ()=>modalConfig.visible, kvEditModel, tagEditModel], () => {// 设置 1s 延时，避免弹窗还未显示便执行setTimeout(() => {const html = document.getElementsByClassName('ant-modal-header') || []const len = html.lengthif (len > 0) {for(let i=0; i < len; i++) {// 清理元素已存在监听，并重新增加监听  html[i].removeEventListener('dblclick', () => {})html[i].addEventListener("dblclick", () => {isFullScreen.value = !isFullScreen.value});}}},1000)})

• 为弹窗增加class绑定

  :wrapClassName="isFullScreen ? 'full-modal':''"
  

• 设置样式

  .full-modal {.ant-modal {width: 100%;top: 0;padding-bottom: 0;margin: 0;}.ant-modal-content {display: flex;flex-direction: column;height: calc(100vh);width: calc(100vw);}.ant-modal-body {flex: 1;}
  }
  

  因为很多页面都需要这段样式，所以将这段样式写在app.vue中

如此，在弹窗显示时，双击标题区可以实现全屏与非全屏切换。

5、待优化项

• 为弹窗增加显示的切换入口（双击入口不易发现）
• 配置更加简化

---

6、更新

既然全屏是通过class实现的，那为何不能通过原始的方式添加class呢？这样就不需要isFullScreen变量及对应的绑定。

于是：可以删除所有isFullScreen相关的代码，只需要如下的监听和full-modal样式就行

watch([blockChainVisible, ()=>userUploadConfig.visible, ()=>modalConfig.visible], () => {setTimeout(() => {const html = document.getElementsByClassName('ant-modal-wrap') || []const len = html.lengthif (len > 0) {for(let i=0; i < len; i++) {html[i].addEventListener("dblclick", () => {if (html[i].classList.value.includes('full-modal')) {html[i].classList.remove("full-modal")} else {html[i].classList.add("full-modal")}});}}},1000)})