全屏插件可以让您的应用以全屏模式运行。它使用 Web Fullscreen API，并提供了跨浏览器支持。
安装
用法
// 组合式 API
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
// 检查是否支持全屏
console.log($q.fullscreen.isCapable)
// 检查是否处于全屏状态
console.log($q.fullscreen.isActive)
// 切换全屏状态
$q.fullscreen.toggle()
// 进入全屏
$q.fullscreen.request()
// 退出全屏
$q.fullscreen.exit()
// 监听状态变化
watch(() => $q.fullscreen.isActive, val => {
console.log('全屏状态：', val)
})
}content_paste
// 选项式 API
export default {
mounted() {
// 检查是否支持全屏
console.log(this.$q.fullscreen.isCapable);
// 检查是否处于全屏状态
console.log(this.$q.fullscreen.isActive);
// 切换全屏状态
this.$q.fullscreen.toggle();
// 进入全屏
this.$q.fullscreen.request();
// 退出全屏
this.$q.fullscreen.exit();
// 监听状态变化
this.$watch("$q.fullscreen.isActive", (val) => {
console.log("全屏状态：", val);
});
},
};content_paste
基础示例
指定目标元素
您可以让特定的 DOM 元素进入全屏模式：
警告
在一些手机上，可能会有一些小影响：
- 例如在三星 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>content_paste