监听屏幕的全屏,关闭全屏;某元素设置全屏;

1、监听屏幕的全屏,关闭全屏

document.addEventListener('fullscreenchange', function (event) {
      if (document.fullscreenElement) {
        isFullscreen.value=true
      } else {
        isFullscreen.value=false
      }
    });

2、某元素设置全屏

import screenfull from 'screenfull';
 const handleFullScreen = (value: boolean) => {
      console.log(value);
      let elem: any = document.getElementById('life-cycleBox');//也可换成$refs.xxx的形式
      if (screenfull.isEnabled) {
        screenfull.toggle(elem);
      }
    };

全屏时,弹出框、message提示,下拉框由于是挂载在body上可能不能正常显示,所以需要设置挂载节点到全屏元素身上,例如and可以使用 : getContainer: ()=>htmlElement 的形式更改挂载节点
3、flex布局下,汉字自动换行,英文不自动换行
添加 word-break: break-all;word-wrap:break-word;即可实现中英文都自动换行

你可能感兴趣的:(监听屏幕的全屏,关闭全屏;某元素设置全屏;)