布局页面 | Quasar Framework 中文网

布局页面

我们将讨论在QLayout中封装页面。如果尚未安装，请先阅读QLayout文档页面。

QPageContainer API

QPage API

布局生成器

通过单击下面的按钮来搭建您的布局。

Layout Builder

用法

QPage必须由QPageContainer封装，而QPageContainer又必须是QLayout的子节点。

<q-layout>
  ...
  <q-page-container>
    <q-page>
      <!-- 页面内容 -->
    </q-page>
  </q-page-container>
  ...
</q-layout>

通常情况下，QPageContainer是Layout模板的一部分（它只包含一个<router-view/>子元素），其内容进入/src/pages下的单独vue文件中。如果尚未安装，请阅读[使用布局和页面进行路由]](/layout/routing-with-layouts-and-pages).

<!-- 布局vue文件: -->
<q-layout>
  ...
  <q-page-container>
    <router-view />
  </q-page-container>
  ...
</q-layout>

<!-- 页面vue文件: -->
<q-page padding>
  <!-- 页面内容 -->
</q-page>

例子

TIP

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

Style-fn

QPage需要QLayout，因为QLayout控制页面的所有偏移量，并根据其“view”属性配置计算页眉/页脚/抽屉使用的空间。默认情况下，您的QPage组件上将设置一个min-heightCSS属性，以确保内容始终填充屏幕，即使内容只有几行也是如此。

如果您想调整甚至删除此属性，可以使用style-fn属性来实现：

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

<script>
export default {
  // ...
  methods: {
    myTweak (offset) {
      // “offset”是一个数字（像素），
      //它表示基于QLayout“view”属性配置的
      //屏幕上页眉+页脚的总高度

      // 这实际上是Quasar中默认style-fn的功能
      return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
    }
  }
}
</script>