全屏插件

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

WARNING

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

AppFullscreen API

安装


// 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>