屏幕插件 | Quasar 框架

屏幕插件

Quasar 屏幕插件允许您在处理 Javascript 代码时拥有动态且响应式的 UI。出于性能考虑，建议尽可能使用响应式 CSS 类。

用法

请注意下面的 $q.screen。这只是一个简单的用法示例。

<q-list :dense="$q.screen.lt.md">
  <q-item>
    <q-item-section>John Doe</q-item-section>
  </q-item>

  <q-item>
    <q-item-section>Jane Doe</q-item-section>
  </q-item>
</q-list>

// script part of a Vue component
import { useQuasar } from 'quasar'
import { computed } from 'vue'

export default {
  setup () {
    const $q = useQuasar()
    const buttonColor = computed(() => {
      return $q.screen.lt.md
        ? 'primary'
        : 'secondary'
    })

    return { buttonColor }
  }
}

我们也可以在 Vue 组件外部使用 Screen 插件。

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md
// Screen.name ('xs', 'sm', ...)

主体类

如果您启用了它（请参阅下面示例后的操作方法），您还可以根据应用于 document.body 的特定 CSS 类集来设置内容样式：screen--xs、screen--sm、……、screen-xl。

body.screen--xs {
  .my-div {
    color: #000;
  }
}

body.screen--sm {
  .my-div {
    color: #fff;
  }
}

或者 Sass 中的优雅变体

.my-div
  body.screen--xs &
    color: #000
  body.screen--sm &
    color: #fff

如何启用主体类

为了启用上述行为，请像下面一样编辑您的 /quasar.config 文件。请注意，这会略微增加首次有意义绘制的时间。

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< add this
    }
  }
}

配置

有几种方法可以用来调整 Screen 插件的工作方式

方法	描述	示例
setSizes(Object)	更改窗口断点；不更改 CSS 断点。	setSizes({ lg: 1024, xl: 2000 })
setDebounce(Number)	将默认的 100ms 防抖更改为其他值。	setDebounce(500) // 500ms

示例

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })
}

import { Screen } from 'quasar'
Screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

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

1. 简介

2. Screen API

3. 使用方法

4. 主体类

4.1. 如何启用主体类

5. 配置