使用场景

1.  echarts图表显示的时候会使用到大屏幕及
2.  滑动鼠标几秒之后取消鼠标。

一、大屏实现

在此使用原生js展示demo；点击展示大屏，退出全屏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sider{
            background-color: aqua;
            width: 100%;
            height: 400px;
            margin: 0 auto;
            text-align: left;
        }
    </style>
</head>
<body>
    
    <div class="sider">
        <button  id="btn" >点击全屏</button>
    </div>
    <script>
    window.onload = function () {
      document.getElementById('btn').onclick=function(){
        
        if(this.innerText === '点击退出全屏'){
            this.innerText = '点击全屏';
            handleUnFull()
        }else{
            this.innerText = '点击退出全屏';
            handfull()
        }
      }
   // 全屏显示
   function handfull () {
      var ele = document.documentElement;
    // console.log('全屏', ele);
      if (ele.requestFullscreen) {
        // HTML W3C 提议
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        // IE11
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
        // Webkit (works in Safari5.1 and Chrome 15)
        ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
        // Firefox (works in nightly)
        ele.msRequestFullscreen();
      }
    }

    // 退出预览全屏
  function  handleUnFull () {
      // console.log('退出');
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozExitFullScreen) {
        document.mozExitFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
}
    </script>

</body>
</html>

二、鼠标不移动消失

利用window监听mousemove去判断设置鼠标的样式

// 增加定时器去监听移动事
var mousemove = null;
window.addEventListener('mousemove', (e)=>{
      if (mousemove) {
        clearTimeout(mousemove);
        document.body.style.cursor = 'auto';
      }
      mousemove = setTimeout(() => {
        document.body.style.cursor = 'none';
      }, 3000);
});