Question

我正在尝试防止vuetify v-navigation-drawer与页面内容重叠。

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

Answer 1

我想您正在寻找的是导航组件的app属性。

Juste删除它，您将获得预期的结果

<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侧面导航抽屉与页面内容重叠

2 个答案: