vue.js - How can I react to whether the browser is in fullscreen mode?

Question

I'm creating a web application with Vue.js for which users may want to put the application in fullscreen mode. I want to show a "maximize" icon () in the top-right of the application when the application is not in fullscreen mode, and I want to show a "restore down" icon (︎) when the application is in fullscreen mode. I want to handle the switching of these icons with Vue.js.

I've searched Google for how to do this, even just using vanilla JavaScript, but I'm not finding something that works.

标签： vue.js

Answer 1

I developed a solution using a combination of this answer and this answer.

In your mounted function, add an event listener:

mounted: function () {
  const vm = this
  window.addEventListener('resize', () => {
    vm.windowInnerHeight = window.innerHeight
  })
},

Add the necessary windowInnerHeight variable in your data section:

data () {
  return {
    windowInnerHeight: undefined,
  }
},

Add a computed property:

computed: {
  applicationIsInFullscreenMode () {
    return this.windowInnerHeight === screen.availHeight
  }
},

And then you can use that computed property in your template like this:

{{ applicationIsInFullscreenMode ? '🗗︎' : '' }}