全屏插件

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

WARNING

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

安装

// quasar.conf.js

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

用法

TIP

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

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

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

// 退出全屏模式:
AppFullscreen.exit()
  .then(() => { // v1.5.0+
    // success!
  })
  .catch(err => { // v1.5.0+
    // oh, no!!!
  })
// 在Vue文件中

// 请求全屏模式:
this.$q.fullscreen.request()
  .then(() => { // v1.5.0+
    // success!
  })
  .catch(err => { // v1.5.0+
    // oh, no!!!
  })

// 退出全屏模式:
this.$q.fullscreen.exit()
  .then(() => { // v1.5.0+
    // success!
  })
  .catch(err => { // v1.5.0+
    // oh, no!!!
  })
Basic
On custom element

WARNING

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

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

这完全取决于运行代码平台的Web Fullscreen API支持。

注意全屏更改

<template>...</template>

<script>
export default {
  watch: {
    '$q.fullscreen.isActive' (val) {
      console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
    }
  }
}
</script>

AppFullscreen API

Loading API...
Please wait...