布局页面 | Quasar 框架

布局页面

我们将讨论如何将页面封装在 QLayout 中。如果您还没有阅读，请先阅读 QLayout 文档页面。

布局构建器

点击下面的按钮搭建您的布局。

用法

QPage 必须封装在 QPageContainer 中，而 QPageContainer 又必须是 QLayout 的子元素。

<q-layout>
  ...
  <q-page-container>
    <q-page>
      <!-- page content -->
    </q-page>
  </q-page-container>
  ...
</q-layout>

通常，QPageContainer 是布局模板的一部分（其中仅包含 <router-view /> 子元素），其内容位于 /src/pages 下的单独的 vue 文件中。如果您还没有阅读，请阅读使用布局和页面进行路由。

<!-- vue file for Layout: -->
<q-layout>
  ...
  <q-page-container>
    <router-view />
  </q-page-container>
  ...
</q-layout>

<!-- vue file for a Page: -->
<q-page padding>
  <!-- page content -->
</q-page>

示例

提示

由于 QPageContainer 和 QPage 需要一个布局，而 QLayout 默认管理整个窗口，因此出于演示目的，我们将使用容器化的 QLayout。但请记住，您绝不需要为 QPageContainer 和 QPage 使用容器化的 QLayout。

样式函数

QPage 需要 QLayout，因为 QLayout 控制页面的所有偏移量，并根据其 view 属性配置，考虑头部/底部/抽屉占用的空间。默认情况下，您的 QPage 组件将设置 min-height CSS 属性，以确保内容始终填充屏幕，即使内容只有几行。

如果您希望调整甚至删除此属性，可以使用 style-fn 属性

<template>
  <q-page :style-fn="myTweak">...</q-page>
</template>

<script>
export default {
  // ...
  methods: {
    myTweak (offset) {
      // "offset" is a Number (pixels) that refers to the total
      // height of header + footer that occupies on screen,
      // based on the QLayout "view" prop configuration

      // this is actually what the default style-fn does in Quasar
      return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
    }
  }
}
</script>

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

1. 简介

2. QPageContainer API

3. QPage API

4. 布局构建器

5. 用法

5.1. 示例

5.2. 样式函数