全屏插件 | Quasar Framework 中文网

全屏插件

有些时候，你希望你的网站或应用程序全屏运行。通过封装Web Fullscreen API，Quasar可以轻松实现。

WARNING

请注意，由于还没有针对Web Fullscreen API的固定Web标准，因此行为会因运行代码的平台而异。

AppFullscreen API

安装

Quasar CLI

Vite plugin / Vue CLI

UMD

// quasar.config.js

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

用法

TIP

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

// 在Vue文件之外
import { AppFullscreen } from 'quasar'

// 请求全屏模式：
AppFullscreen.request()
  .then(() => {
    // success!
  })
  .catch(err => {
    // oh, no!!!
  })

// 退出全屏模式：
AppFullscreen.exit()
  .then(() => {
    // success!
  })
  .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!!!
    })
}

WARNING

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

例如，在Samsung S4上，当App进入全屏模式时，顶部栏会向上滑动，但仍会保留在屏幕上。
另一方面，在Nexus手机上，例如Nexus 5，Android导航按钮和顶部栏会完全消失。

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