Hacer la página a pantalla completa a través de JS en vue

En el proyecto vue, cree un efecto que pueda controlar la visualización de pantalla completa de la página. Haga clic en el botón Pantalla completa en la esquina superior izquierda de la página para lograr un efecto de pantalla completa. El botón aquí no es obvio y no puedo. no lo veo
Diagrama de representación

Página normal:

Implementación de código:
Para lograr la pantalla completa es principalmente a través del método requestFullScreen() para abrir un elemento en modo de pantalla completa.
Este método requiere un prefijo específico para funcionar en diferentes navegadores. Utilice el método document.exitFullscreen() para cancelar el modo de pantalla completa.
Precauciones de uso
1. El método requestFullscreen solo puede ser activado por el usuario.
2. El salto de página debe salir primero de la pantalla completa.
3. El elemento que ingresa a la pantalla completa se separará de su elemento principal, por lo que puede causar la falla de algunos css antes
. Para compatibilidad, agregue -webkit, - moz o prefijo -ms)
Estoy usando el método nativo para modificar el css
4. Después de que un elemento A esté en pantalla completa, sus elementos secundarios deben volver a estar en pantalla completa, y el elemento A debe salir primero de la pantalla completa

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