全屏(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>