Methods a

  • Write a full screen on and off the method, there will be a full screen can not listen to the key event ESC quit the full screen to modify the status value problem. (Test Google, Firefox, 360, QQ; Browser, Microsoft Edge, etc.)
<template> <div class="aaa"> <el-button type="primary" @click="handleFullScreen" </el-button> </div> </template>Copy the code
data(){ return { fullScreen: false, } }, methods:{ handleFullScreen(){ let dom = document.documentElement; // Check whether the screen is full. If it is, exit the full-screen state. If (this.fullscreen){if(document.exitFullscreen){document.exitFullscreen(); }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen(); }else if(document.msExitFullScreen){ document.msExitFullScreen(); } }else{ if(dom.requestFullscreen){ dom.requestFullscreen(); }else if(dom.webkitRequestFullScreen){ dom.webkitRequestFullScreen(); }else if(dom.mozRequestFullScreen){ dom.mozRequestFullScreen(); }else if(dom.msRequestFullScreen){ dom.msRequestFullScreen(); // IE11 } } this.fullScreen = ! this.fullScreen; }, / / determine whether the current state for a full-screen checkFull () {let isFull = document. FullscreenElement | | document. MozFullScreenElement | | document.webkitFullscreenElement || document.msFullscreenElement; if( ! isFull){ isFull = false; }else { isFull = true; } return isFull; }},Copy the code

The solution

  • Mounted if the page size changes, listen for the return value of the mounted event, determine whether the page is in full screen state or out of full screen state, and then determine whether to change the status value.
Mounted (){window.addeventListener ('resize', () => {if(! this.checkFull() && this.fullScreen){ this.fullScreen = false; }})},Copy the code

Method 2

  • The third-party plug-in ScreenFull can perfectly solve the problem of full-screen browser on the Web side. I used it briefly (I wrote it as a separate component to use it; To learn more about the plugin, go to the official documentation) and post the code below:
Use the NPM command to download the plugin NPM install screenfullCopy the code
<template> <div style="float:left"> <el-button type="primary" @click="handleScreenFull"><i class="iconfont">&#xe8b8; </i></el-button> </div> </template> <script> import screenfull from 'screenfull'; export default { name: "ScreenFull", data(){ return { isFullScreen: false, } }, mounted() { this.init(); }, methods: { handleScreenFull() { if(! screenfull.isEnabled){ return false; } screenfull.toggle(); }, change() { this.isFullScreen = screenfull.isFullscreen; }, init() { if(screenfull.isEnabled){ screenfull.on('change', this.change); } }, }, destroy() { if(screenfull.isEnabled){ screenfull.off('change', this.change); } } } </script>Copy the code
The parent component uses <template> <div class="aaa"> <screen-full /> </div> </template> <script> import screenFull from "@/components/ScreenFull.vue" export default { name: "Header", components: { screenFull } </script>Copy the code

These are two ways to solve the full screen problem by yourself. If you have a better solution, please comment below