Vue.js 在vuetify中如何将移动应用程序栏下的导航抽屉放置？

桌面模式映像

移动模式图像

“剪裁”选项在桌面模式下工作正常

但是，在移动模式下，应用程序栏会隐藏菜单项。仪表板项被隐藏

即使在移动模式下，我如何将导航抽屉放在应用程序栏下

我的消息来源：

标题 {{item.icon} {{item.title} 导出默认值{ 名称:App,， 组件：{}， 数据：=>{ 出票人：空， 项目：[ {标题：“仪表板”，图标：“mdi视图仪表板”}， {标题：“照片”，图标：“mdi图像”}， {标题：“关于”，图标：“mdi帮助框”}， ] }, };

---

下面的代码为我工作

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

---

我可以使用下面的链接做我想做的事情。代码对我有用

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

我可以使用此链接做我想做的事情

这对我很有用

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

应用 这对我有用

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

应用 尝试从中删除应用程序。 我不知道为什么，但对我来说它正在工作。

尝试从中删除应用程序。

---

我不知道为什么，但对我来说，它起作用了。

如果添加CSS属性style=display:block；对于v-app-bar和v-navigation-drawer，它会改变什么吗？@zerbene谢谢，但它不起作用，结果是一样的。这对你有帮助吗，如在v-app-bar和v-navigation之间添加-drawer@zerbene谢谢，正如你所说，我在v-app-bar和v-navigation-drawer之间添加了一个，并对其进行了测试。但它不起作用，结果是一样的；对于v-app-bar和v-navigation-drawer，它会改变什么吗？@zerbene谢谢，但它不起作用，结果是一样的。这对你有帮助吗，如在v-app-bar和v-navigation之间添加-drawer@zerbene谢谢，正如你所说，我在v-app-bar和v-navigation-drawer之间添加了一个，并对其进行了测试。但它不起作用，同样的结果。