$q 对象 | Quasar 框架

$q 对象

Quasar 提供了一个 $q 对象，您可以将其用于各种用途。您将在整个文档中注意到它。

属性名称	类型	描述
`$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 应用程序下运行时可用。

用法

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

使用“script setup”的 Composition API

以下是 .vue 文件

<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>

不使用“script setup”的 Composition API

以下是 .vue 文件

<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>

Options API

以下是 .vue 文件

<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 文件之外

import { Quasar, Platform } from 'quasar'

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

发现错误？在浏览器中编辑此页面

1. 简介

2. 用法

2.1. 使用“script setup”的 Composition API

2.2. 不使用“script setup”的 Composition API

2.3. Options API

2.4. .vue 文件之外