Make the page full screen through JS in vue

In the vue project, make an effect that can control the full-screen display of the page. Click the FullScreen button in the upper left corner of the page to achieve a full-screen effect. The button here is not obvious and I can’t see it.
Rendering diagram

Normal page:

Code implementation:
To achieve full screen is mainly through the requestFullScreen() method to open an element in full screen mode.
This method requires a specific prefix to work in different browsers. Use the document.exitFullscreen() method to cancel full-screen mode.
Precautions for use
1. The requestFullscreen method can only be triggered by the user.
2. The page jump needs to exit the full screen first.
3. The element that enters the full screen will be separated from its parent element, so it may cause the failure of some css before
. For compatibility, please add -webkit, -moz or -ms prefix)
I am using the native method to modify the css
4. After an element A is full screen, its child elements need to be full screen again, and the element A needs to exit the full screen first

onMounted(() => {
    
    
	// 给页面的按钮绑定事件，点击可以触发全屏
	setTimeout(() => {
    
    
        document.getElementById('signinBbtn').onclick = function (params) {
    
    
          requestFullScreen(document.documentElement);
          let doc = document.getElementsByClassName('sginInContainer')[0]
          doc.style.position = 'fixed'
          doc.style.left = 0
          doc.style.top = 0
          doc.style.width = '100vw'
        }
      }, 1000)
		// 使用window.onresize 监听页面进入全屏和退出全屏操作，并作处理
      window.onresize = function () {
    
    
        let doc = document.getElementsByClassName('sginInContainer')[0]
        if (!doc) {
    
     return }
        if (document.fullscreenElement) {
    
    
          console.log('进入全屏')
        } else {
    
    
          // 退出全屏的时候恢复原来的样式
          console.log('退出全屏')
          doc.style.position = 'relative'
          doc.style.left = 'inherit'
          doc.style.top = 'inherit'
          doc.style.width = 'inherit'
        }
      };
    })


// 实现全屏的方法
 const requestFullScreen = (element) => {
    
    
      var requestMethod = element.requestFullScreen || //W3C
        element.webkitRequestFullScreen || //Chrome
        element.mozRequestFullScreen || //FireFox
        element.msRequestFullScreen; //IE11
      if (requestMethod) {
    
    
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
    
     //for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
    
    
          wscript.SendKeys("{F11}");
        }
      }
    }

     //退出全屏 这里没有用到 ，esc键和F11可以直接退出，
    function exitFull() {
    
    
        // 判断各种浏览器，找到正确的方法
        var exitMethod = document.exitFullscreen || //W3C
            document.mozCancelFullScreen || //FireFox
            document.webkitExitFullscreen || //Chrome等
            document.webkitExitFullscreen; //IE11
        if (exitMethod) {
    
    
            exitMethod.call(document);
        } else if (typeof window.ActiveXObject !== "undefined") {
    
     //for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
    
    
                wscript.SendKeys("{F11}");
            }
        }
    }