Vuetify 导航抽屉问题

Posted 2023-02-22

【中文标题】Vuetify 导航抽屉问题

【英文标题】：Vuetify navigation drawer issue

【发布时间】：2019-01-09 16:37:27

【问题描述】：

我想要一个具有缩放宽度的 vuetify “临时导航抽屉”。 vuetify 组件默认有 300px 宽度，所以我像这样覆盖它（使用https://vuetifyjs.com/en/components/navigation-drawers“临时”示例）

<template>
  <v-layout
    wrap
    style="height: 200px;"
  >
    <v-container>
      <v-layout justify-center>
        <v-btn
          color="pink"
          dark
          @click.stop="drawer = !drawer"
        >
          Toggle
        </v-btn>
      </v-layout>
    </v-container>

    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
      style="width: 13vw"                //I change width to 13vw here
    >

    </v-navigation-drawer>
  </v-layout>
</template>

问题是，当菜单未激活时，它隐藏在视口左侧 300px 处。我在较大的显示器上缩放 13vw 宽度将变得大于 300 像素，因此左侧导航菜单的一部分未隐藏。如何更改导航菜单的默认隐藏？

Jsfiddle：https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ 在未激活导航抽屉的情况下缩小以查看我在说什么

【问题讨论】：

尝试使用vw，它是相对于视口宽度的1%

如果你能提供一个 jsfiddle 或 codepen 来帮助

添加了 jsfiddle。

【参考方案1】：

所以 vuetify 组件不支持对组件的 width 属性使用像素以外的任何东西，因此您有两个选择。您可以将width 属性与像素一起使用。或者你可以添加一点 css hack 来使用 vw。

选项 1：将您的 v-navigation-drawer 更改为以下内容：

<v-navigation-drawer
    v-model="drawer"
    absolute
    temporary
    
>

选项 2：

将此添加到您的 CSS 中

.v-navigation-drawer--close.v-navigation-drawer--temporary 
    transform: translateX(-13vw) !important;