带页脚的Vue Quasar布局抽屉

编程问答 2022-06-12

问题描述

试图使页脚出现在我的q抽屉中。这是我的模板和组件

<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"添加到“退出”项中，滚动会变得混乱，并且当窗口垂直足够小时，“退出”项开始出现在其他列表项的顶部。

如何为“退出”按钮设置一个固定的页脚，而不会弄乱滚动区域？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

quasar-frameworkvue.js