验证导航抽屉问题

Question

我想有一个证明“临时导航抽屉”与缩放宽度。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缩放宽度将变得大于300px，因此导航菜单的一小部分将不会隐藏在左侧。如何更改导航菜单的默认隐藏？

Jsfiddle：https://jsfiddle.net/agreyfield91/tgpfhn8m/957/在取消激活导航抽屉的情况下缩小以查看我正在谈论的内容

Answer 1

因此，vuetify组件只支持使用像素作为组件的width属性，因此您有两个选择。您可以对像素使用width属性。或者你可以添加一点css hack来使用大众。

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

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

选项2：

将此代码添加到css中

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