美文网首页
监听屏幕的全屏,关闭全屏;某元素设置全屏;

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

作者: 花影_62b4 | 来源:发表于2022-05-31 08:46 被阅读0次

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

    相关文章

      网友评论

          本文标题:监听屏幕的全屏,关闭全屏;某元素设置全屏;

          本文链接:https://www.haomeiwen.com/subject/vutzprtx.html