全屏插件 | Quasar Framework 中文网

全屏插件

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

WARNING

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

AppFullscreen API

安装

Quasar CLI

UMD

Vue CLI

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

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>

阅读更多?