布局页面

我们将讨论在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>