全屏插件 | Quasar 框架

全屏插件

有时您可能希望您的网站或应用程序以全屏模式运行。Quasar 通过封装 Web 全屏 API 来简化操作。

警告

请注意，由于 Web 全屏 API 尚未形成固定的 Web 标准，因此代码在不同平台上的行为会有所不同。

Quasar CLI

Vite 插件 / Vue CLI

UMD

// quasar.config file

return {
  framework: {
    plugins: [
      'AppFullscreen'
    ]
  }
}

用法

提示

有关属性和方法的完整列表，请查看 API 部分。

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!!!
    })
}

警告

在某些手机上，这几乎没有效果

例如，在三星 S4 上，当应用程序进入全屏模式时，顶部栏会向上滑动，但仍会停留在屏幕上。
另一方面，在 Nexus 手机上，比如 Nexus 5，Android 导航按钮和顶部栏会完全消失。

这完全取决于代码运行的平台对 Web 全屏 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 ? 'In fullscreen now' : 'Exited fullscreen')
    })
  }
}
</script>

发现错误了吗？在浏览器中编辑此页面

1. 简介

2. AppFullscreen API

3. 安装

4. 用法

5. 监控全屏变化