全螢幕外掛程式 | Quasar 框架

全螢幕外掛程式

有時候您會希望您的網站或應用程式以全螢幕模式執行。Quasar 透過包裝 Web Fullscreen API，讓此操作變得容易。

警告

請注意，由於目前 Web Fullscreen 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!!!
    })
}

警告

在某些手機上，這效果不大

例如，在 Samsung S4 上，當應用程式進入全螢幕時，頂部列會向上滑動，但仍會保留在螢幕上。
另一方面，在 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>

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

2. AppFullscreen API

3. 安裝

4. 用法

5. 監看全螢幕變更