Vue.js 我如何应对浏览器是否处于全屏模式？

我正在使用Vue.js创建一个web应用程序，用户可能希望将该应用程序置于全屏模式。我想显示一个“最大化”图标（我使用和的组合开发了一个解决方案

在

mounted

函数中，添加一个事件侦听器：

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

在

数据

部分中添加必要的

windowInnerHeight

变量：

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

添加一个

computed

属性：

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

然后可以在模板中使用该计算属性，如下所示：

{{applicationsinfullscreenmode？🗗；︎；'：'