时间戳

首页 > 解决方案 > 如何扩展悬停导航抽屉并在较小的屏幕上使用应用栏图标？

javascript - 如何扩展悬停导航抽屉并在较小的屏幕上使用应用栏图标？

问题描述

如果我在桌面上，我试图让我的导航抽屉具有属性 true，如果我在较小的屏幕或移动设备上，则expand-on-hover显示经典。v-app-bar-nav-icon我已经这样做了，但行为有点奇怪：

<v-app-bar-nav-icon
    v-if="!drawer"
    @click="drawer = true"
></v-app-bar-nav-icon>

<v-navigation-drawer
  app
  dark
  :expand-on-hover="$vuetify.breakpoint.mdAndUp && drawer"
  v-model="drawer"
  style="background-color: #374A67"
></v-navigation-drawer>

工作，但在某些情况下只是坏了，如果我调整窗口大小，导航抽屉在悬停时推动应用栏，给我一个空白空间。我怎样才能以正确的方式做到这一点？谢谢

标签： javascriptvue.jsvuetify.js

解决方案

这将完美地工作。

<v-navigation-drawer
  :value="$vuetify.breakpoint.smAndDown? drawer : true"
  app
  dark
  :expand-on-hover="$vuetify.breakpoint.mdAndUp"
  style="background-color: #374A67"
></v-navigation-drawer>

推荐阅读