q 物件 | Quasar 框架

The $q object

Quasar 提供一個 $q 物件，您可以用於各種用途。您會在整個文件中注意到它。

Prop 名稱	類型	描述
`$q.version`	字串	Quasar 版本。
`$q.platform`	物件	與從 Quasar 匯入的 Platform 物件相同。
`$q.screen`	物件	由 Screen Plugin 提供的物件。
`$q.lang`	物件	Quasar 語言包管理，包含標籤等（語言檔案之一）。專為 Quasar 組件設計，但您也可以在您的應用程式組件中使用。更多資訊：Quasar 語言包。
`$q.iconSet`	物件	Quasar 圖示集管理（圖示集檔案之一）。專為 Quasar 組件設計，但您也可以在您的應用程式組件中使用。更多資訊：Quasar 圖示集。
`$q.cordova`	物件	參考 Cordova 全域物件。僅在 Cordova 應用程式下執行時可用。
`$q.capacitor`	物件	參考 Capacitor 全域物件。僅在 Capacitor 應用程式下執行時可用。

用法

以下章節將教您如何在 .vue 檔案（使用 Composition API 和 Options API）以及在它們之外使用它。

搭配「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 檔案之外