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

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;即可实现中英文都自动换行

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容