The front-end screenfull realizes the full-screen display function of the interface

Let’s introduce dependencies first.
We need to execute them first.

npm config set registry https://registry.npmjs.org/

Set the local npm registry address to the official npm registry address.
Otherwise, there will be some problems installing this thing.
Then we execute the command to install it.

npm install screenfull

After installation, we execute it on the terminal

npm config delete registry

Restore the npm address to the default settings
and then we write the component code as follows

<template>
  <div id="app">
    <button @click="toggleFullscreen">全屏</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';
export default {
      
      
  name: 'App',
  data(){
      
      
    return {
      
      
    }
  },
  methods: {
      
      
    toggleFullscreen() {
      
      
      if (screenfull.isEnabled) {
      
      
        screenfull.toggle(); // 切换全屏状态
      } else {
      
      
        // 不支持全屏的处理逻辑
      }
    }
  }
}
</script>

First of all, it is necessary to introduce screenfull because it is required to realize the function.
Then we set a button and click to call the toggle of screenfull to achieve full screen.
But not all situations support this logic, so we need to make a judgment first to avoid errors.
Then we run the project

and try to click full screen

. It will It’s also very useful to fill up the entire screen immediately.