我正在尝试将导航面板添加到 v-card
但不知何故,在添加抽屉导航时,v-card 中的所有内容都被向下推出卡片。
<v-card flat outlined>
<v-navigation-drawer v-model="drawer"
:mini-variant.sync="mini"
permanent>
<v-row>
<v-btn class="float-right" icon @click.stop="mini = !mini">
<v-icon color="black">mdi-chevron-left</v-icon>
</v-btn>
</v-row>
<p>
<v-card v-if="!mini">
TEST
</v-card></p>
</v-navigation-drawer>
<v-row dense>
<v-col cols="12">
<PlotCard
style="min-height: 350px"
:value="1837.32"
:percentage="3.2"
:loading="isLoading1"
percentage-label="vs last week"
action-label="V2"
></PlotCard>
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<table-card class="h-full" label="Recent Orders" />
</v-col>
</v-row>
</v-card>
我在这里重现了这个问题 https://codesandbox.io/s/vuetify-playground-lxq25?file=/src/components/ExampleComponent.vue:38-55
如您所见,抽屉导航位于 v-card 中,但其他卡片被推到外面。
最终,我想在 Vuetify 中使用抽屉导航的 right
属性使其位于右侧,但即使是普通的 ins 也无法正常工作。知道为什么会发生这种情况吗?
编辑:添加 absolute 使抽屉导航显示为叠加层,但我试图使其显示在右侧并将卡片的内容“挤压”到左侧。
最佳答案
vuetify 有一个布局系统。现在你有内容和抽屉导航,抽屉导航不正确,因为它不知道它属于哪里。您必须将您的内容推送到 v-main(vuetify 内容布局组件),并通过将 app
属性传递给抽屉导航,您可以告诉它布局的一部分,它是侧边栏。更多信息:
https://vuetifyjs.com/en/components/application/#default-application-markup .
并传递 right
将导航推到右边。演示:https://codesandbox.io/s/vuetify-playground-forked-qjjnp?file=/src/components/ExampleComponent.vue
关于vue.js - v-card 中的抽屉导航在 Vuetify 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67336294/