App 可见性

Quasar 插件封装了 Page Visibility API 让您可以知道您的 App 当前是否可见。

AppVisibility API

安装

// quasar.config.js

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

用法

// 在 Vue 文件之外
import { AppVisibility } from 'quasar'
AppVisibility.appVisible // Boolean

// 在 Vue 文件之内
import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()
  // now use $q.appVisible (Boolean)
}

<template>
  <div class="q-pa-md">
    <div>
      Switch to another browser tab or app then come back here to see some changes.
    </div>

    <q-markup-table v-if="eventList.length > 0" class="q-mt-md">
      <tbody>
        <tr v-for="evt in eventList" :key="evt.timestamp">
          <td>{{ evt.timestamp }}</td>
          <td>{{ evt.label }}</td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>

监听状态的变化

<template>...</template>

<script>
import { useQuasar } from 'quasar'
import { watch } from 'vue'

export default {
  setup () {
    const $q = useQuasar()

    watch(() => $q.appVisible, val => {
      console.log(val ? 'App 变得可见' : 'App 进入后台')
    })
  }
}
</script>