Quasar 平台检测

Quasar 提供了工具来检测代码运行在哪个平台上。

用法

在 Vue 组件的 JS 中：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.platform.is.mobile
}

在 Vue 组件的模版中：

$q.platform.is.cordova

如果在一个 vue 文件之外使用，您需要像下述方式引入它：

import { Platform } from 'quasar'

Platform.is 对象会返回当前代码运行平台的详细信息，类似：

{
  chrome: true,
  desktop: true,
  mac: true,
  name: "chrome",
  platform: "mac",
  version: "70.0.3538.110",
  versionNumber: 70,
  webkit: true
}

来看看如何控制在不同的平台上显示不同的 DOM 或组件：

<div v-if="$q.platform.is.desktop">
  I'm only rendered on desktop!
</div>

<div v-if="$q.platform.is.mobile">
  I'm only rendered on mobile!
</div>

<div v-if="$q.platform.is.electron">
  I'm only rendered on Electron!
</div>

属性列表

下表是 Platform 对象的部分可用属性，完整的列表请见 API 部分。

关于 SSR 的注意事项

在 SSR 应用中只能使用$q.platform的形式，如果需要在 server 端使用 import { Platform } from 'quasar' ，您需要这样做：:

import { Platform } from 'quasar'

// you need access to `ssrContext`
function (ssrContext) {
  const platform = process.env.SERVER
    ? Platform.parseSSR(ssrContext)
    : Platform // otherwise we're on client

  // platform is equivalent to the global import as in non-SSR builds
}

其中的ssrContext 可以在 @quasar/app-vite Boot File 或者 @quasar/app-webpack Boot File文件中访问到。 也可以在 @quasar/app-vite preFetch 或者 @quasar/app-webpack preFetch中访问到，ssrContext 会作为函数的参数，在上述文件的函数中访问。

这一切的原因是,在一个仅客户端的应用程序中,每个用户将使用的一个新的实例应用在浏览器内。对于服务器端渲染，我们也希望如此:每个请求都应该有一个新的、独立的应用实例，这样就不会有交叉请求的状态污染。因此，Platform 需要分别绑定到每个请求。

API