如何创建带有nav抽屉的Vuetify容器，以及它旁边可重放的内容？
如何创建带有nav抽屉的Vuetify容器，以及它旁边可重放的内容？
提问于 2020-07-15 14:35:46
我在创建一个包含导航抽屉和可重新大小的容器(卡片、行或任何其他Vuetify元素)的Vuetify容器时遇到了问题，如果抽屉打开或关闭时它会缩小(例如，类似于Gmail )。
在页面顶部还有一个工具栏，它必须始终保持相同的大小，抽屉必须只在它下面的一个容器中。
我尝试了以下几点：
<div id="app">
<v-app id="inspire" style="background-color: #ccc;">
<v-main>
<v-container fluid class="align-start px-12 py-12">
<v-row class="mx-0">
<v-toolbar flat class="px-6">
<div class="text-h5 mx-3 primary--text">Messages</div>
<v-spacer />
<v-btn
small
depressed
text
@click="drawer = !drawer"
>
toggle drawer
</v-btn>
</v-toolbar>
</v-row>
</v-container>
<v-container fluid class="align-start px-0 d-flex flex-row">
<v-navigation-drawer
v-model="drawer"
class="mr-2"
dark
hide-overlay
>
Navigation
</v-navigation-drawer>
<v-card flat>card</v-card>
</v-container>
</v-main>
</v-app>
</div>new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
drawer: true
})
})它有一张很小的卡片，当我打开/关闭抽屉时，它仍然完好无损。因此，我尝试将width="100%"属性添加到卡片中。这使得卡片占据了这个地方的其余部分，但当我打开/关闭抽屉时，它仍然保持大小。
有什么帮助吗？下面是这段代码的钢笔。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-16 12:44:39
一种方法是根据:width的值设置drawer支柱.
<div id="app">
<v-app id="inspire" style="background-color: #ccc;">
<v-main>
<v-container fluid class="align-start px-12 py-12">
<v-row class="mx-0">
<v-toolbar flat class="px-6">
<div class="text-h5 mx-3 primary--text">Messages</div>
<v-spacer />
<v-btn
small
depressed
text
@click="drawer = !drawer"
>
toggle drawer
</v-btn>
</v-toolbar>
</v-row>
</v-container>
<v-container fluid class="align-start px-0 d-flex flex-row">
<v-navigation-drawer
v-model="drawer"
class="mr-2"
dark
hide-overlay
:width="drawer?256:0"
>
Navigation
</v-navigation-drawer>
<v-card flat class="grow">card</v-card>
</v-container>
</v-main>
</v-app>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62917402
复制相关文章
相似问题
腾讯云开发者
