vue realizes the browser full screen display function

1. The project uses the sreenfull plug-in and execute the command to install it.

npm install --save screenfull

2. After installation, introduce the project and use a button to control it. The button method is as follows:

toggleFullscreen() {
  if (!) {
   this.$message({
    message: 'you browser can not work',
    type: 'warning'
   })
   return false
  }
  ()
}

I tried it and it can be full screen. I use chrome, and IE9 or below.

3. After the first step is completed, it is how to monitor the changes in the full screen, because if you exit the full screen through the Esc key, you cannot monitor it at this time. After some search, the solution is as follows:

&lt;script&gt;
import screenfull from 'screenfull'
export default {
 data () {
   return {
    isFullscreen: false
   }
  }，
 methods: {
  /**
    * Full screen event
    */
  screenfull() {
   if (!) {
    this.$message({
     message: 'Your browser does not work',
     type: 'warning'
    })
    return false
   }
   ()
    = true
  },
  /**
    * Method of whether to fully screen and press the ESC key
    */
  checkFull() {
   var isFull =  ||  ||  || 
   // to fix : false || undefined == undefined
   if (isFull === undefined) {
     isFull = false
   }
   return isFull
  }
 },
 mounted() {
    = () =&gt; {
      // Monitor whether the button is pressed under full screen      if (!()) {
       // Action to be executed after pressing esc under full screen        = false
      }
     }
    }
}
&lt;/script&gt;

Summarize

The above is the full screen display function of vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!