带页脚的 Vue Quasar 布局抽屉

Posted 2023-02-19

【中文标题】带页脚的 Vue Quasar 布局抽屉

【英文标题】：Vue Quasar Layout Drawer with Footer

【发布时间】：2021-01-10 09:28:01

【问题描述】：

试图让页脚出现在我的 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"
      
      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 项开始出现在其他列表项的顶部。

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

【参考方案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=）。