Question

导航抽屉存在一些问题，希望有人可以提出建议。

https://codepen.io/hobbeschild/pen/MWeXpey

我认为应该使用“修剪”使抽屉显示在应用程序栏的下方，但它会显示在其顶部。
如果包含卡的高度较短，则抽屉也将限制在该高度（可以为其提供滚动条）。抽屉是否可以始终保持其高度和宽度刚好大于其内容物？

HTML：

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto overflow-hidden" height="100" width="344">
      <v-app-bar color="deep-purple accent-4" dark>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title>My files</v-toolbar-title>
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" absolute bottom temporary clipped>
        <v-list nav dense>
          <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
            <v-list-item>
              <v-list-item-title>Foo</v-list-item-title>
            </v-list-item>
            <v-list-item>
              <v-list-item-title>Bar</v-list-item-title>
            </v-list-item>
            <v-list-item>
              <v-list-item-title>Fizz</v-list-item-title>
            </v-list-item>
            <v-list-item>
              <v-list-item-title>Buzz</v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
      <v-card-text>
        The navigation drawer will appear from the bottom on smaller size screens.
      </v-card-text>
    </v-card>
  </v-app>
</div>

JS：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    drawer: false,
    group: null
  }),

  watch: {
    group() {
      this.drawer = false;
    }
  }
});

Answer 1

我认为您不想在卡片中包含导航元素。尝试将卡片放在标记中的导航抽屉下方。
向 v-app-bar 组件添加 clipped-left。
从 absolute 中删除 v-navigation-drawer。

裁剪和抽屉大小的Vuetify导航抽屉问题

1 个答案: