css - 带页脚的 Vue Quasar 布局抽屉

Question

试图让页脚出现在我的 q-drawer 上。这是我的模板和组件

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="drawer = !drawer" />
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="drawer"
      show-if-above
      :mini="!drawer || miniState"
      @click.capture="drawerClick"
      width="200"
      bordered
      class="no-scrollbar"
      content-class="bg-grey-3"
    >
      <q-scroll-area class="fit">
        <q-list padding>
          <q-item clickable v-ripple exact to="/">
            <q-item-section avatar>
              <q-icon name="home" />
            </q-item-section>

            <q-item-section>
              Home
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple to="/install">
            <q-item-section avatar>
              <q-icon name="get_app" />
            </q-item-section>

            <q-item-section>
              Install
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple to="/manage">
            <q-item-section>
              Manage
            </q-item-section>
          </q-item>

          
          <!-- I want the below to appear down at the bottom of the drawer as a footer -->

          <q-separator />

          <q-item clickable v-ripple @click="$msal.signOut()">
            <q-item-section avatar>
              <q-icon name="logout" />
            </q-item-section>

            <q-item-section>
              Sign Out
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>

      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
        <q-btn dense round unelevated color="blue" icon="chevron_left" @click="miniState = true" />
      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  data() {
    return {
      drawer: false,
      miniState: false
    };
  },

  methods: {
    drawerClick(e: Event) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
});
</script>

不幸的是，如果我将 class="fixed-bottom" 添加到 Sign Out 项，滚动会变得困惑，当窗口在垂直方向上变得足够小时，Sign Out 项开始出现在顶部其他列表项。

如何为我的“退出”按钮制作一个不会弄乱滚动区域的固定页脚？

Answer 1

可以申请

content-class="column justify-between no-wrap"

到 q-drawer，并创建一个应用了 col-grow 类的垫片，以便将抽屉的最后一个元素推到底部。

确保将所有抽屉子元素包裹在 q-item 标签中。请注意，我在我的 Codepen 中删除了 q-scroll，因为我更喜欢让浏览器原生处理垂直滚动。

See Codepen

如果您真的需要让抽屉的页脚始终可见，我认为除了给它一个 position: absolute 之外别无他法。
在这种情况下，您必须创建一个具有 position: relative 的类(或内联样式)以应用于 q-drawer(仍然使用 content- class= 而不是 class=)。