有时你希望你的网站或应用全屏运行。Quasar 通过封装 Web 全屏 API 简化了这一过程。
¥There are times when you want your website or App to run in fullscreen. Quasar makes it easy by wrapping the Web Fullscreen API.
警告
请注意，由于 Web 全屏 API 没有固定的 Web 标准，因此根据代码运行的平台，行为会有所不同。暂时还不行。
¥Please note that the behavior is different depending on the platform the code is running on, due to the fact that there isn’t a fixed Web standard for Web Fullscreen API yet.
// quasar.config file
return {
framework: {
plugins: [
'AppFullscreen'
]
}
}用法(Usage)
¥Usage
提示
要查看属性和方法的详尽列表，请查看 API 部分。
¥For an exhaustive list of properties and methods, please check out the API section.
import { AppFullscreen } from 'quasar'
// Requesting fullscreen mode:
AppFullscreen.request()
.then(() => {
// success!
})
.catch(err => {
// oh, no!!!
})
// Exiting fullscreen mode:
AppFullscreen.exit()
.then(() => {
// success!
})
.catch(err => {
// oh, no!!!
})import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
// Requesting fullscreen mode:
$q.fullscreen.request()
.then(() => {
// success!
})
.catch(err => {
// oh, no!!!
})
// Exiting fullscreen mode:
$q.fullscreen.exit()
.then(() => {
// success!
})
.catch(err => {
// oh, no!!!
})
}警告
在某些手机上，这几乎不会产生任何影响：
¥On some phones this will have little effect:
例如，在三星 S4 上，当应用进入全屏模式时，顶部栏会向上滑动，但仍保留在屏幕上。
¥For example, on Samsung S4, when App goes into fullscreen, the top bar will slide up but still remain on screen.
另一方面，在 Nexus 手机上，例如 Nexus 5，Android 导航按钮和顶部栏会完全消失。
¥On Nexus phones, on the other hand, like Nexus 5, Android navigation buttons and top bar disappear completely.
这完全取决于代码运行平台对 Web 全屏 API 的支持。
¥It all depends on the Web Fullscreen API support of the platform the code is running on.
全屏变化监控(Watching for fullscreen changes)
¥Watching for fullscreen changes
<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 ? 'In fullscreen now' : 'Exited fullscreen')
})
}
}
</script>