$q 对象 | Quasar 中文网

$q 对象

Quasar 提供了一个 $q 对象，你可以将其用于各种目的。你会在整个文档中都注意到这一点。

¥Quasar supplies a $q object that you can use for various purposes. You will notice it throughout the docs.

属性名称	类型	描述
`$q.version`	字符串	Quasar 版本。
`$q.platform`	对象	与从 Quasar 导入的平台对象相同。
`$q.screen`	对象	屏幕插件提供的对象。
`$q.lang`	对象	Quasar 语言包管理，包含标签等（语言文件之一）。专为 Quasar 组件设计，但你也可以在应用组件中使用它。更多信息：Quasar 语言包。
`$q.iconSet`	对象	Quasar 图标集管理（图标集文件之一）。专为 Quasar 组件设计，但你也可以在应用组件中使用它。更多信息：Quasar 图标集。
`$q.cordova`	对象	引用 Cordova 全局对象。仅在 Cordova 应用下运行时可用。
`$q.capacitor`	对象	引用 Capacitor 全局对象。仅在 Capacitor 应用下运行时可用。

用法(Usage)

¥Usage

以下部分将教你如何在 .vue 文件（使用 Composition API 和 Options API）及其外部使用它。

¥The following sections will teach you how to use it in .vue files (with both Composition API and Options API) and outside of them.

带 “脚本设置” 的 Composition API(Composition API with “script setup”)

¥Composition API with “script setup”

以下是一个 .vue 文件：

¥The following is a .vue file:

<template>
  <div>
    <div v-if="$q.platform.is.ios">
      Gets rendered only on iOS platform.
    </div>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar'

const $q = useQuasar()

console.log($q.platform.is.ios)

// showing an example on a method, but
// can be any part of Vue script
function show () {
  // prints out Quasar version
  console.log($q.version)
}
</script>

不带 “脚本设置” 的 Composition API(Composition API without “script setup”)

¥Composition API without “script setup”

以下是一个 .vue 文件：

¥The following is a .vue file:

<template>
  <div>
    <div v-if="$q.platform.is.ios">
      Gets rendered only on iOS platform.
    </div>
  </div>
</template>

<script>
import { useQuasar } from 'quasar'

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

    console.log($q.platform.is.ios)

    // showing an example on a method, but
    // can be any part of Vue script
    function show () {
      // prints out Quasar version
      console.log($q.version)
    }

    return {
      show
    }
  }
}
</script>

选项 API(Options API)

¥Options API

以下是一个 .vue 文件：

¥The following is a .vue file:

<template>
  <div>
    <div v-if="$q.platform.is.ios">
      Gets rendered only on iOS platform.
    </div>
  </div>
</template>

<script>
// not available here outside
// of the export

export default {
  // inside a Vue component script
  ...,

  // showing an example on a method, but
  // can be any part of Vue script
  methods: {
    show () {
      // prints out Quasar version
      console.log(this.$q.version)
    }
  }
}
</script>

.vue 文件之外(Outside of a .vue file)

¥Outside of a .vue file

import { Quasar, Platform } from 'quasar'

console.log(Quasar.version)
console.log(Platform.is.ios)

1. Introduction

2. 用法(Usage)

2.1. 带 “脚本设置” 的 Composition API(Composition API with “script setup”)

2.2. 不带 “脚本设置” 的 Composition API(Composition API without “script setup”)

2.3. 选项 API(Options API)

2.4. .vue 文件之外(Outside of a .vue file)