全屏(Fullscreen)

有些时候，你希望你的网站或应用程序全屏运行。
通过封装Web Fullscreen API，Quasar可以轻松实现。

请注意，由于Web Fullscreen API还没有固定的Web标准，因此行为有所不同，具体取决于运行代码的平台。

安装

编辑 /quasar.conf.js:

framework: {
  plugins: ['AppFullscreen']
}

基础用法

// 在Vue文件之外
import { AppFullscreen } from 'quasar'

// 确定平台是否具有全屏功能:
(Boolean) AppFullscreen.isCapable

// 确定网站是否处于全屏模式:
(Boolean) AppFullscreen.isActive

// 请求全屏模式：
AppFullscreen.request()

// 退出全屏模式：
AppFullscreen.exit()

// 切换全屏模式：
AppFullscreen.toggle()
//在Vue文件中

// 确定平台是否具有全屏功能：
(Boolean) this.$q.fullscreen.isCapable

// 确定网站是否处于全屏模式：
(Boolean) this.$q.fullscreen.isActive

// 请求全屏模式：
this.$q.fullscreen.request()

// 退出全屏模式：
this.$q.fullscreen.exit()

// 切换全屏模式：
this.$q.fullscreen.toggle()

例子

观察全屏更改：

// vue文件
<template>...</template>

<script>
export default {
  watch: {
    '$q.fullscreen.isActive' (val) {
      console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
    }
  }
}
</script>
应用可见性