vue项目全屏功能及局部全屏下使用ant-design-vue中弹框类组件不展示

适用对象

比如组件中的modal，menu，message，notification，以及一些form下拉组件等

问题

在全屏以及局部全屏情况下，使用ant中带下拉框及模板的组件会导致不显示

全屏功能

此处我封装的js文件，也可单独写函数使用

// 进入全屏
/**
	domName：需全屏的DOM元素
*/
//局部打开全屏我单独写的，但这个文件中的退出及判断全屏可引入使用
export function fullScreen(domName) {
    // let el = document.getElementById(domName)//会导致模板被覆盖问题
    //在模板掩盖时用document.documentElement此处代码可解决全屏问题
    let el = document.documentElement;
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    };
    return;
}
//退出全屏
export function exitScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    }
}
// 判断是否为全屏
export function fullscreenElement() {
    var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
    // console.log(fullscreenEle);
    return fullscreenEle;
}

页面引用

  import { fullScreen, exitScreen,fullscreenElement} from '@/utils/fullscreen'
  //键盘esc关闭全屏监控
  mounted() {
      let that = this
       window.onresize = function(){
        setTimeout(()=>{
            if(!fullscreenElement()){
                that.isFullScreen = false
            }
        })
      };
    },
  //使用
      screenClick(){
      	this.isFullScreenType = !this.isFullScreenType //控制页面icon展示
        if (!isFullScreen('contentAll')) {
          fullScreen('contentAll');
        } else {
          exitScreen();
        }
      },

解决

整个页面全屏解决

将fullScreen函数中el的获取替换

let el = document.getElementById(domName)
替换为
let el = document.documentElement;

局部全屏解决

可在页面单独使用全屏函数

在全局对元素进行设置

 //在main.js中修改
 //单独引用需修改的元素
 import { message,notification,Select } from 'ant-design-vue'
 //message和notification一样，有config属性可修改，全局设置属性如下：
	message.config({
	  maxCount: 3,
	  getContainer:() => document.getElementById('contenbox') //此为重点
	});
//页面上标签的使用灭有config属性，则用以下方法
Select.props.getPopupContainer.default = triggerNode => {
  return triggerNode.parentNode || document.getElementById('contenbox')
}