实现页面局部全屏以及elementUI弹出层失效/错位问题解决

// 引入elementUI的MessageBox组件
import { MessageBox } from 'element-ui';
 
// 全屏函数
function requestFullScreen(element) {
  const requestMethod = element.requestFullScreen || //W3C
                         element.webkitRequestFullScreen || //Chrome等
                         element.mozRequestFullScreen || //FireFox
                         element.msRequestFullscreen; //IE11
 
  if (requestMethod) {
    requestMethod.call(element);
  }
}
 
// 退出全屏函数
function cancelFullScreen() {
  const exitMethod = document.exitFullscreen || //W3C
                      document.webkitCancelFullScreen || //Chrome等
                      document.mozCancelFullScreen || //FireFox
                      document.msExitFullscreen; //IE11
 
  if (exitMethod) {
    exitMethod.call(document);
  }
}
 
// 使用MessageBox弹出确认框，并处理全屏逻辑
MessageBox.confirm('确认要全屏显示吗？', '提示', {
  confirmButtonText: '全屏',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 全屏当前元素
  const element = document.documentElement;
  requestFullScreen(element);
}).catch(() => {
  // 取消全屏
  cancelFullScreen();
});

这段代码首先定义了全屏和退出全屏的函数，然后使用MessageBox.confirm弹出确认框，用户确认后调用全屏函数进入全屏模式，取消时则退出全屏模式。这样既解决了弹出层失效/错位问题，也实现了页面局部区域的全屏功能。