Tornar a página em tela cheia por meio de JS em vue

No projeto vue, crie um efeito que possa controlar a exibição em tela inteira da página. Clique no botão FullScreen no canto superior esquerdo da página para obter um efeito de tela inteira. O botão aqui não é óbvio e não posso Não veja.
Efeito de imagem

Página normal:

implementação de código:
para alcançar a tela cheia é principalmente através do método requestFullScreen () para abrir um elemento no modo de tela cheia.
Este método requer um prefixo específico para funcionar em diferentes navegadores. Use o método document.exitFullscreen() para cancelar o modo de tela inteira.
Precauções de uso
1. O método requestFullscreen só pode ser acionado pelo usuário.
2. O salto de página precisa sair primeiro da tela cheia.
3. O elemento que entra na tela cheia será separado de seu elemento pai, então pode causar falha de algum css antes
. Para compatibilidade, adicione -webkit, - moz ou prefixo -ms)
Estou usando o método nativo para modificar o css
4. Depois que um elemento A está em tela cheia, seus elementos filhos precisam estar em tela cheia novamente e o elemento A precisa sair da tela cheia primeiro

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}");
            }
        }
    }