防止 vuetify 侧边导航抽屉与页面内容重叠

Question

我试图阻止 vuetify v-navigation-drawer 与页面内容重叠。

如何以响应方式使 v-main 内容居中？

https://codesandbox.io/s/nuxt-vuetify-sidenav-u0xte?file=/layouts/default.vue

Answer 1

我猜你要找的是导航组件的app属性

只需删除它，您就会得到预期的结果

<v-navigation-drawer
    permanent
    mini-variant
    expand-on-hover
    left
>

顺便说一句，为什么要将 value 绑定到 true ？没有理由这样做 :p 你可以删除它

编辑：抱歉，我忘了在我的例子中，我有一个包含 v-navigation-drawer 和 v-main

的父容器

<v-container
      fluid
      class="d-flex flex-row align-start pa-0 align-stretch"
    >
        <v-navigation-drawer
            permanent
            mini-variant
            expand-on-hover
            left
        >
        </v-navigation-drawer>
        <v-main></v-main>
    </v-container>

Answer 2

这是记录在案的行为。 https://vuetifyjs.com/en/components/navigation-drawers/#caveats

The expand-on-hover prop does not alter the content area of v-main. To have content area respond to expand-on-hover, bind mini-variant.sync to a data prop.

所以你需要做的就是创建一个数据变量并将其绑定到 mini-variant.sync

<template>
  <v-navigation-drawer app absolute mini-variant expand-on-hover left :mini-variant.sync="mini">
  </v-navigation-drawer>
</template>

<script>
export default {
  name: "SideNav",
  data() {
    return {
        mini: true
    }
};
</script>

防止 vuetify 侧边导航抽屉与页面内容重叠

Prevent vuetify side navigation drawer to overlap with pages content

sidebar

responsive-design

navigation-drawer

nuxt.js

vuetify.js