Quasar全屏插件
有些时候，您可能希望您的网站/app，运行在全屏状态下。Quasar 通过封装Web Fullscreen API提供了一个全屏插件。
警告
请注意，由于 Web Fullscreen API 没有还固定的标准，所以在不同的平台上，这个全屏行为不一致。
AppFullscreen API
安装
// quasar.config.js
return {
framework: {
plugins: [
'AppFullscreen'
]
}
}用法
提示
关于完整的属性和方法，请查看 API 部分。
// 在 Vue 文件之外这样使用
import { AppFullscreen } from 'quasar'
//请求进入全屏模式:
AppFullscreen.request()
.then(() => {
// 成功!
})
.catch(err => {
// oh, no!!!
})
// 退出全屏模式:
AppFullscreen.exit()
.then(() => {
// 成功!
})
.catch(err => {
// oh, no!!!
})
// 在 Vue 文件之内这样使用
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
//请求进入全屏模式:
$q.fullscreen.request()
.then(() => {
// success!
})
.catch(err => {
// oh, no!!!
})
// 退出全屏模式:
$q.fullscreen.exit()
.then(() => {
// success!
})
.catch(err => {
// oh, no!!!
})
}
警告
在一些手机上，可能会有一些小影响：
- 例如在三星 S4 上，当 App 进入全屏模式后，顶部栏会向上滑动，然后保留在屏幕上。
- 在 Nexus 手机上，例如 Nexus 5，安卓导航键和顶部状态栏会完全消失。 这完全取决于 Web Fullscreen API 在代码运行的平台上的支持程度。
监听全屏状态的变化
<template>...</template>
<script>
import { useQuasar } from 'quasar'
import { watch } from 'vue'
export default {
setup () {
const $q = useQuasar()
watch(() => $q.fullscreen.isActive, val => {
console.log(val ? '目前是全屏' : '已退出全屏')
})
}
}
</script>